Next-generation liquid glass effects for the modern web.
GlassiFy is an open-source and a lightweight, high-performance JavaScript library that brings the "Liquid Glass" aesthetic to any HTML element. Unlike standard CSS backdrop-filter methods, Glassify introduces dynamic capabilities including real-time turbulence and refraction.
It works natively with the DOM, requiring NO frameworks (React, Vue, Angular compatible), and is designed to be fully responsive and touch-friendly.
- Two Rendering Modes:
- Default: A crisp, static frosted glass (similar to Apple/iOS aesthetics).
- Super: A dynamic, liquid surface with customizable turbulence and flow.
- Lightweight: Zero dependencies, highly optimized, minimal impact on performance and loading times.
- Easy to use: Just include the library and apply the
glassifyclass to your elements. - Customizable: Fine-tune blur, refractive scale, brightness, and noise octaves.
- Drop-in Ready: Uses Web Components for instant setup.
Add the script directly to your HTML <head> or before the closing </body> tag.
<!-- Replace {version} with the specific version number -->
<script src="https://glassify.saviru.me/cdn/{version}/glassify.js"></script>
<!-- OR remove version to get latest version -->
<script src="https://glassify.saviru.me/cdn/glassify.js"></script>Download the latest release and include it in your project directory.
<script src="./assets/js/glassify.js"></script>Place the <glassi-fy> custom element anywhere inside your <body>. This acts as the controller for the global effect.
<glassi-fy></glassi-fy><glassi-fy mode="super"></glassi-fy>Add the .glassify class to any container you want to transform.
<div class="glassify card">
<h2>Glass Card</h2>
<p>Content floating on liquid glass.</p>
</div>While GlassiFy handles the refraction, blur and other effects, you must define the dimensions.
.card {
width: 400px;
height: 250px;
border-radius: 16px;
}Btw, If you want to customize it further you can customize any style properties using CSS variables:
💡 Pro Tip: Use
rgbabackgrounds with low alpha values (0.2 - 0.5) to allow the glass refraction to shine through.
.card {
width: 400px;
height: 250px;
border-radius: 16px;
/* Essential for the glass effect visibility */
background-color: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
}Configure the global effect by adding attributes to the <glassi-fy> tag.
<glassi-fy
mode="super"
scale="60"
blur="8"
frequency="0.02"
octaves="4">
</glassi-fy>| Attribute | Default | Range | Description | Mode |
|---|---|---|---|---|
| frequency | 0.01 | 0 - 1 | Controls the turbulence frequency. | Super Only * |
| octaves | 3 | 2 - 8 | Level of detail in the noise. | Super Only * |
| scale | 45 | 25 - 75 | Displacement scale magnitude. | Any |
| blur | 3 | 2 - 10 | Blur radius for background elements. | Any |
| brightness | 1.4 | 1 - 2 | Backdrop brightness intensity. | Any |
* Attributes marked are exclusive to the "Super" mode.
You can see a live demo of GlassiFy in action here.
Copyright (c) 2025 Saviru Kashmira Atapattu
This project is licensed under the MIT License. See the LICENSE file for details
Contributions are welcome! If you have any suggestions or improvements, feel free to open an issue or submit a pull request.
Made with ❤️ for Web Development Community