Scroll down
Use this web component anywhere!
Copy this code to import the component:
add to HEAD of your page
<script type="module" crossorigin src="https://glass.danilofiumi.com/web-comps/boundle.js"></script>add to BODY of your page
<sv-liquid-glass styles='{"style":{"roundness":60,"padding_x":3,"padding_y":3},"text":{"content":"Glassify →","edit":false,"font_family":"Inter","size_weight":500,"font_size":3.5},"color":{"accent":"#D7DADD"}}' contrast="light"></sv-liquid-glass>🥃 Beyond Glassmorphism: Where Liquid Glass Improves
I built this liquid glass generator after realizing that there are often those who confuse Liquid Glass with the traditional glassmorphism, with its frosted blurs and overused translucency but no depth or liquiduty.
Glassmorphism is mostly aesthetic mimicry. It relies too heavily on background blur and opacity tricks without truly adapting to the environment or providing a tactile sense of space. It breaks down with complex UI layering and sacrifices clarity for trend.
Apple recently launched the Liquid Glass aesthetic — a completely new visual approach. This isn’t just another glass effect; it’s a responsive, fluid layer that adapts dynamically. Instead of simulating glass, it feels like an interactive membrane: alive, immersive, and modern.
With precise layering, subtle distortion, dynamic lighting, and a carefully tuned material blur, Liquid Glass gives your UI motion, mood, and depth, without losing usability. It works in light and dark themes, adapts to context, and doesn't break under complexity.
And now you can have it also in you modern website!
Customize your button
Export