Liquid Glass Svelte
š§ Svelte Liquid Glassifier
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.
āØ What Makes It Different?
Glassmorphism ā Liquid Glass.
Glassmorphism fakes depth with blur and opacity.
Liquid Glassifier gives you real responsive fluidity, motion, and depth.
ā Features
- š„ 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
ā” Use Anywhere with 1 Script
No build tools. No dependencies. Just copy & paste:
Liquid Glassifier - Demo preview
1. Load the Web Component:
Paste this in your <head>:
<script type="module" crossorigin src="https://glass.danilofiumi.com/web-comps/boundle.js"></script>
2. Use the component:
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>
šļø contrast Options
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
ā ļø Browser Support Tested on: Chrome on macOS May not fully work in Safari (backdrop-filter and SVG filter support is limited)
Top categories
Need a Svelte website built?
Hire a professional Svelte developer today.