Create Liquid Glass Effects with Dynamic Displacement – GlassiFy
It extends beyond standard CSS backdrop-filter capabilities by introducing real-time turbulence and refraction through SVG filter technology. It works as a Web Component with zero framework dependencies.
The library currently provides distinct rendering modes. The default mode creates crisp frosted glass similar to Apple’s Liquid Glass design language. The super mode generates animated liquid surfaces with customizable turbulence parameters. Both modes maintain full DOM compatibility and respond naturally to touch and mouse interactions.
1. Load the GlassiFy library via a CDN or host it locally.
<!-- Load the latest version --> <script src="https://glassify.saviru.me/cdn/glassify.js"></script> <!-- OR Download the release and reference it in your project. --> <script src="./assets/js/glassify.js"></script>
2. GlassiFy uses a custom element <glassi-fy> as a global controller. Place this tag anywhere inside your <body>and it then generates the necessary SVG filters and styles.
<!-- Initialize the glass engine --> <glassi-fy></glassi-fy> <!-- Apply glass effect to any element --> <div class="glassify glass-element"> <h2>Glass Element</h2> <p>Any Content Here.</p> </div>
3. GlassiFy handles the physics of the refraction. You must handle the layout and dimensions.
You must use a background color with a low alpha value (transparency). If the background is opaque, the glass effect will not be visible.
.glass-element {
width: 300px;
height: 30px;
border-radius: 24px;
/* Essential: Low alpha allows refraction to shine through */ background-color: rgba(255, 255, 255, 0.1);
/* Optional: Add a border to define edges */ border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
} 4. Enable the super mode to activate animated displacement with noise-based turbulence:
<glassi-fy mode="super"></glassi-fy>
5. Configure the Liquid Glass effect by adding the following attributes to the <glassi-fy> tag:
<glassi-fy scale="45" blur="3" brightness="1.4" frequency="0.01" octaves="3"> </glassi-fy>
Q: Why does the glass effect not appear on my elements?
A: The most common cause involves missing background transparency. Your .glassify elements must use rgba() or hsla() color values with alpha below 0.5. Solid backgrounds block the backdrop sampling that creates the glass effect.
Q: How does GlassiFy perform on mobile devices?
A: The library leverages hardware-accelerated CSS properties that mobile browsers optimize well. The super mode with high octave values may impact frame rates on older mobile hardware
Q: Does the effect work on images or video backgrounds?
A: Yes. The effect works by processing the visible content behind the element in the browser’s viewport. It works perfectly over images, videos, and gradients.
Q: Can I control the effect dynamically with JavaScript?
A: Yes. You can select the <glassi-fy> element and use setAttribute to update scale, blur, or other parameters.
The post Create Liquid Glass Effects with Dynamic Displacement – GlassiFy appeared first on CSS Script.
Kilmar Abrego Garcia arriving at a downtown Nashville courthouse with his wife, Jennifer Vasquez Sura,…
The University of Nevada, Las Vegas, is among the nation's largest Hispanic-serving institutions.(Photo by Hugh…
Warning: This review contains full spoilers for The Pitt Season 2, Episode 8!One of the…
A newly uncovered phishing campaign is delivering Agent Tesla, one of the most widely used…
The Trump Administration’s purchase of two vacant warehouses in two rural Pennsylvania townships illustrates where…
Netflix has announced that it has declined to raise its offer for Warner Bros. Discovery,…
This website uses cookies.