Create Modern Glassmorphism Interfaces with Liquid Glass CSS Framework

AuthorMael-667

Last UpdateDecember 25, 2025

LicenseMIT

Features:

SVG Displacement Filters: Uses feTurbulence and feDisplacementMap to create the organic “liquid” refraction.
Utility Class API: Apply effects with classes like .liquidGlass, .liquidGlassLarge, .liquidBtn, and .blur-[0-10].
Dynamic Color Tinting: Elements can inherit hue from their surroundings via data-hue attributes and the .dynamicHue class.
Light Mode Support: The .glassLightMode modifier switches text to black and removes depth shadows for bright backgrounds.

How To Use It:

1. Load the Liquid Glass CSS’ JavaScript in the document. The script listens for DOMContentLoaded, then appends an inline <style> block to the <head> and an invisible <svg> containing the displacement filters to the <body>.

<script src="./liquidGlass.js"></script>

2. Add the .liquidGlass class to any element:

<!-- Basic frosted glass card -->
<div class="liquidGlass" style="padding: 2rem;">
  <h2>Welcome</h2>
  <p>This card has the Liquid Glass effect applied.</p>
</div>

3. When your glass element sits on a white or light-colored background, add .glassLightMode:

<!-- Glass card optimized for light backgrounds -->
<div class="liquidGlass glassLightMode" style="padding: 2rem;">
  <p>Black text, no heavy shadows — cleaner on light surfaces.</p>
</div>

4. For modals, hero overlays, or full-width sections, use .liquidGlassLarge:

<!-- Large glass panel with 3rem border-radius -->
<section class="liquidGlassLarge" style="padding: 4rem;">
  <h1>Feature Showcase</h1>
  <p>This variant removes saturation to avoid visual distraction on big areas.</p>
</section>

5. Use .blur-[0-10] to override the default 3px blur:

<!-- Heavy blur (10px) -->
<div class="liquidGlass blur-10" style="padding: 1rem;">
  Maximum frost effect.
</div>
<!-- No blur -->
<div class="liquidGlass blur-0" style="padding: 1rem;">
  Distortion only, no frosting.
</div>

6. The .liquidBtn class styles buttons with a translucent background and hover transitions:

<!-- Frosted glass button -->
<button class="liquidBtn">
  Get Started
</button>

7. Enable Dynamic Color Tinting. This feature lets .liquidGlass elements change their tint based on the data-hue of background sections they overlap.

Add data-hue="#hexcolor" to content sections:

<!-- Define hue zones -->
<section data-hue="#4169e1" style="height: 100vh; background: #4169e1;">
  <h2>Royal Blue Zone</h2>
</section>
<section data-hue="#e14169" style="height: 100vh; background: #e14169;">
  <h2>Pink Zone</h2>
</section>

Wrap your glass elements in a parent with .dynamicHue or .dynamicHueHvr:

<!-- Sticky nav that tints based on scroll position -->
<nav class="dynamicHueHvr" style="position: fixed; top: 0; width: 100%;">
  <div class="liquidGlass" style="padding: 1rem;">
    Navigation Bar
  </div>
</nav>

8. Override Background Color and Shadows.

/* Custom dark glass with stronger shadow */
.my-custom-glass::after {
  background: rgb(0 0 0 / 15%);
  box-shadow:
    inset 1px 1px 3px #ffffff,        /* Inner highlight */
    inset -1px -2px 3px #3131314d,    /* Inner shadow */
    0px 0px 12px #00000075;           /* Outer glow */
}

9. Override Border Radius. You must apply the radius to the element and both pseudo-elements:

/* Sharper corners */
.my-custom-glass,
.my-custom-glass::before,
.my-custom-glass::after {
  border-radius: 0.25rem;
}

CSS Classes Reference

Class	Description
`.liquidGlass`	Core frosted glass effect. White text, `0.9rem` radius, 3px blur, depth shadows.
`.glassLightMode`	Modifier for light backgrounds. Black text, no depth shadows.
`.liquidGlassLarge`	Variant for large surfaces. `3rem` radius, no saturation boost.
`.liquidBtn`	Frosted button style. Translucent white background, hover transition.
`.blur-0`	Sets `backdrop-filter: blur(0px)`.
`.blur-1`	Sets `backdrop-filter: blur(1px)`.
`.blur-2`	Sets `backdrop-filter: blur(2px)`.
`.blur-3`	Sets `backdrop-filter: blur(3px)` (default).
`.blur-4`	Sets `backdrop-filter: blur(4px)`.
`.blur-5`	Sets `backdrop-filter: blur(5px)`.
`.blur-6`	Sets `backdrop-filter: blur(6px)`.
`.blur-7`	Sets `backdrop-filter: blur(7px)`.
`.blur-8`	Sets `backdrop-filter: blur(8px)`.
`.blur-9`	Sets `backdrop-filter: blur(9px)`.
`.blur-10`	Sets `backdrop-filter: blur(10px)`.
`.dynamicHue`	Parent class. Enables scroll-based color tinting for child `.liquidGlass` elements.
`.dynamicHueHvr`	Parent class. Same as `.dynamicHue`, plus hover state color shift.
`.dynamic`	Auto-applied by JavaScript when a glass element overlaps a `data-hue` zone.

Data Attributes Reference

Attribute	Description
`data-hue="#hexcolor"`	Defines the tint color for a section. Glass elements with `.dynamicHue` parents will inherit this color when overlapping.

CSS Custom Properties (Set by JavaScript)

Property	Description
`--background`	Background color applied to `.dynamic::after`.
`--shadow`	Box shadow applied to `.dynamic::after`.
`--backgroundHover`	Hover background color for `.dynamicHueHvr` children.

Changelog:

12/25/2025

v1.2