By rssfeeds-admin 
Features:
- SVG Displacement Filters: Uses
feTurbulenceandfeDisplacementMapto 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-hueattributes and the.dynamicHueclass. - Light Mode Support: The
.glassLightModemodifier 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. |
The post Create Modern Glassmorphism Interfaces with Liquid Glass CSS Framework appeared first on CSS Script.
Discover more from RSS Feeds Cloud
Subscribe to get the latest posts sent to your email.