Glassmorphism
Saved palettes
What is CSS glassmorphism?
CSS glassmorphism is the frosted-glass effect — a translucent panel that blurs whatever sits behind it, edged with a faint border and a hint of color saturation — made popular by macOS, Windows Fluent, and countless dashboards. This css glassmorphism generator lets you tune every part of that recipe on a live card and copy production-ready glassmorphism css, backdrop-filter and all, the moment it looks right.
How to build your glass
- Drag Blur to set how strongly the card frosts the backdrop behind it — the heart of the effect.
- Set Surface alpha for how milky the glass fill is, and Border alpha for how visible the top edge highlight becomes.
- Push Saturation above 100% to make colors bleed through the glass more vividly, or pull it back for a neutral frost.
- Set the corner Radius, and click Shuffle backdrop to preview your glass over different mesh backgrounds.
- Copy the finished styles with Copy CSS, Copy Tailwind, or Copy HTML for a ready-to-paste card.
Glassmorphism vs. liquid glass
They're the same underlying technique wearing two different names. Glassmorphism is the general frosted-glass style — backdrop-filter blur, a translucent fill, a thin bright border — that's shaped UI design since macOS Big Sur and Windows Fluent. Liquid Glass is Apple's refinement of that idea for iOS 26 and macOS Tahoe: heavier blur, higher saturation, and three details this generator now adds directly — a specular top-highlight, a brighter edge rim, and a diagonal sheen. Open the Presets drawer and apply iOS 26 Button to see all three at once, or dial in Top highlight, Rim intensity, and Sheen by hand in the Surface drawer.
The one thing neither glassmorphism nor these presets do is bend light the way Apple's native renderer does — real-time refraction that distorts whatever sits behind the glass. Plain CSS can fake a convincing look with backdrop-filter and gradients, but not true lensing. Copy Refraction CSS gets closer with a seeded SVG displacement filter layered on top, clearly labeled experimental, since browser support for combining backdrop-filter with an SVG filter still varies.
Liquid glass, Apple-style
Apple's Liquid Glass look from iOS 26 and macOS Tahoe is glassmorphism turned up: heavier blur, high saturation so the wallpaper glows through, a bright thin border, and a generous radius. To use this as a liquid glass generator, push Blur toward the top of its range, lift Saturation well past 100%, keep Surface alpha low so it stays genuinely see-through, and add a soft Border alpha for that lit rim. Copy the liquid glass CSS and layer it over a colorful gradient or photo for the full effect.
Design tips and use cases
Glass only works when there's something worth blurring behind it, so pair these cards with a vivid gradient or image, and keep any text on top high-contrast for legibility. A thin, bright border sells the illusion more than a heavy fill does. Reach for glassmorphism on navbars, modals, pricing cards, music and video players, and notification toasts across web and native app UIs.
Frequently asked questions
Is this glassmorphism generator free to use?
Yes — no signup, no account, and no watermark on the glass effect itself. The Copy CSS and Copy HTML output includes a small, invisible comment crediting MeshSVG in the source, but it's plain text next to your styles, never a visible mark on the card, and you can remove it freely.
How do I add the glassmorphism CSS to my website?
Click Copy CSS for a ready-to-paste block covering background, backdrop-filter, and border, or Copy Tailwind for the same recipe as arbitrary-value utility classes. Copy HTML gives you a complete example element with the styles already applied, so you can see the exact markup structure the effect expects.
What's the difference between glassmorphism and liquid glass?
Glassmorphism is the general frosted-glass style — blur, translucency, a bright edge — that's been part of UI design since macOS Big Sur. Liquid Glass is Apple's iOS 26 and macOS Tahoe take on the same idea, pushed further with a stronger specular top-highlight, a brighter edge rim, and a diagonal sheen layered on top. The Presets drawer's iOS 26 Button preset dials in exactly that combination, but the underlying technique is still CSS backdrop-filter, not Apple's real-time renderer.
Can I recreate Apple's Liquid Glass effect in CSS?
You can get close: push Blur toward the top of its range, lift Saturation well past 100% so color bleeds through, keep Surface alpha low for a genuinely see-through card, and add a soft Border alpha for that lit rim. True Liquid Glass also bends and refracts light in real time, which plain CSS backdrop-filter can't fully reproduce — this gets you a convincing look, not a pixel-perfect clone.
Does backdrop-filter work in all browsers?
Support is strong today — Chrome, Edge, Safari, and Firefox (from version 103) all render backdrop-filter, covering the vast majority of visitors. Safari needed the -webkit- prefix for years, so the Copy CSS output includes it automatically. In the rare unsupported browser, the card just falls back to its plain background color instead of the blur.
Which export option should I use — Copy CSS, Copy Tailwind, or Copy HTML?
Copy CSS if you already have a card or panel element and just need the glass styles added to it. Copy Tailwind if your project is Tailwind-based and you'd rather keep everything as utility classes. Copy HTML if you want a complete, ready-to-paste element — styles and markup together — with nothing else to wire up.
Is the SVG-displacement "true refraction" export production-safe?
Treat it as experimental. Copy Refraction CSS adds a seeded SVG feTurbulence and feDisplacementMap filter on top of the regular glass CSS, warping the card for a look closer to real refraction. Support for combining backdrop-filter with an SVG filter is inconsistent across browsers — some render it beautifully, others ignore or clip the displacement — so ship the plain CSS as your baseline and layer this in only where you've verified the result.
Can I use this glass effect in commercial projects?
Yes. Every glass style you tune and export is free for personal and commercial use — apps, dashboards, marketing sites, client work — with no attribution required and no license fee. Dial in blur, alpha, and saturation as many times as you need before copying the final CSS.
Does it work offline, and where is my glass design stored?
Once the page loads, every slider updates the live preview locally in your browser, with no server involved. Your current settings and any recent designs are kept only in your browser's localStorage, on your own device, until you clear your browser data — nothing about your glass card is ever uploaded.
What's the difference between glassmorphism and a plain semi-transparent box?
A plain semi-transparent box just lets color from behind show through faintly. Glassmorphism adds backdrop-filter blur so the content behind is genuinely frosted rather than just dimmed, plus a bright edge border and a touch of extra saturation, which together read as a physical pane of glass rather than a flat, tinted rectangle.