An open-source and a lightweight JavaScript library inspired by modern liquid glass effect. Transform your UI elements into sleek, frosted liquid glass components instantly.
Optimized for performance with minimal impact on load times.
Dynamic backdrop filters that react to the content behind them.
Two liquid glass effects to choose from. Customize them to fit your design.
Drag the elements to see the liquid glass effect in action. (Demo)
Drag me over the background to see the liquid glass effect.
Comprehensive guide to implementing GlassiFy Liquid Glass Effects on your website.
Add the script tag to your HTML file. You can use the official CDN or your self-hosted version.
Use the glassi-fy custom element in the body of your HTML to apply the liquid glass effect.
You can customize the effect using attributes inside the opening tag. Do not add content between the tags.
| 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 |
Apply the .glassify class to any HTML element you want to have the liquid-glass effect.
You can further customize the appearance using standard CSS. You should define dimensions and basic background colors.