Bring Apple's Liquid Glass UI (iOS 26) to the web
🔗 Live Playground 🎥 Demo
Built with Svelte and exportable as a Web Component, so it works anywhere: React, Vue, Angular, plain HTML — no build tool required.
Glassmorphism ≠ Liquid Glass.
Glassmorphism fakes depth with blur and opacity.
Liquid Glassifier gives you real responsive fluidity, motion, and depth.
- 🔥 Powered by Svelte – fast, reactive, lightweight
- 🌐 Web Component – plug & play in any frontend stack
- 🌊 True liquid distortion and dynamic lighting
- 🎨 Light & dark mode support
- 🧠 Handles complex layering without breaking
No build tools. No dependencies. Just copy & paste:
Liquid Glassifier - Demo preview
Paste this in your <head>:
<script type="module" crossorigin src="https://glass.danilofiumi.com/web-comps/boundle.js"></script>Insert this anywhere in your <body>:
<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>Control how the Liquid Glass component blends with the background environment. Use this to improve readability and visual balance depending on your layout.
| Value | Description |
|---|---|
"light" |
Designed for light backgrounds. Adds subtle shading for separation. |
"dark" |
Optimized for dark backgrounds. Applies glow and soft contrast. |
"light-contrast" |
Higher contrast for light backgrounds. Increases definition and clarity. |
"dark-contrast" |
Higher contrast for dark backgrounds. Adds sharpness and vivid edges. |
✅ Use
-contrastvariants when the default feels too subtle or needs better accessibility.
🎯 Compatible with static sites, CMS platforms, or any JS framework
🙏 Inspiration Inspired by Apple's new iOS 26 Liquid Glass design.
CSS inspired by https://codepen.io/odibixie/pen/vEYEWQR