CSS Glassmorphism Generator — Free Frosted-Glass Effect with Live Preview
Build the frosted-glass effect with sliders for backdrop-filter blur, saturation, background and border opacity, width, radius, and shadow. Preview over four backgrounds, then copy ready-to-use vanilla CSS or Tailwind v4. Free, 100% in your browser.
Glass Card
The frosted-glass effect uses backdrop-filter to blur whatever is behind this element while keeping the foreground content sharp and legible.
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 24px;
box-shadow: 0 6px 24px rgba(0,0,0,0.1);bg-[rgba(255, 255, 255, 0.25)] backdrop-blur-[16px] backdrop-saturate-[180%] border-[1px] border-[rgba(255, 255, 255, 0.3)] rounded-[24px] shadow-[0_6px_24px_rgba(0,0,0,0.1)]Pixel-Level Control
Independent sliders for blur (0-40px), saturation (100-300%), background opacity, border opacity, border width, corner radius, and shadow intensity. Tune until it matches your design.
Preview Over Real Backgrounds
Switch between four sample backgrounds — gradient mesh, photo, dark UI, and your own uploaded image — to verify the glass effect reads correctly in context.
CSS + Tailwind v4 Output
Get vanilla CSS (with -webkit-backdrop-filter for Safari) and a Tailwind v4 class string with arbitrary values. Paste straight into your stylesheet or JSX.
100% Client-Side
No accounts, no uploads, no analytics. The tool runs entirely in your browser. Custom background images stay local — never uploaded anywhere.
CSS Glassmorphism Generator: build a frosted-glass card and copy the CSS
A glassmorphism generator builds the frosted-glass UI surface from three CSS layers: backdrop-filter: blur() to blur what is behind the element, a semi-transparent rgba() background, and a thin light border. Drag the sliders, preview over a gradient, photo, dark UI, or your own image, then copy ready-to-paste vanilla CSS or Tailwind v4. It is free and runs 100% in your browser.
How to generate a glassmorphism effect
- Start from a preset — Subtle iOS, Vibrant Card, Dark Mode, or Heavy Frost — or skip straight to the sliders.
- Set the Blur (0–40px) and Saturation (100–300%); these drive the
backdrop-filter. - Tune Background Opacity and Border Opacity (0–1) so the blur shows through but text stays legible.
- Adjust Border Width (0–6px), Border Radius (0–64px), and Shadow Opacity for the card edge and elevation.
- Switch the Preview Background — or upload a Custom image — to check the glass reads correctly in context.
- Copy the Vanilla CSS or Tailwind v4 output, or hit Reset to return to defaults.
What is glassmorphism and how does it work?
Glassmorphism became the defining UI surface style after Apple shipped it across macOS Big Sur and iOS 14 in 2020. Unlike flat or neumorphic surfaces, glass preserves layering — you see what is behind it — while a thin border keeps a clear edge. The effect hinges on the CSS backdrop-filter property, which applies a graphical effect to the area behind an element rather than to the element itself, as defined in the MDN backdrop-filter reference. For it to do anything, the element must be at least partly transparent — this generator emits an rgba() background so the blurred layer shows through.
Per web.dev Baseline tracking, backdrop-filter reached Baseline Newly Available on September 16, 2024 and is projected to hit Baseline Widely Available on March 16, 2027. The one lasting quirk: Safari still requires the -webkit-backdrop-filter prefix, so the CSS here always writes both the prefixed and unprefixed declarations.
"The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element."— MDN Web Docs, backdrop-filter
Worked examples: settings → output
Default · #ffffff bg @ 0.25, blur 16, saturate 180, radius 24
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255,255,255,0.3); border-radius: 24px; box-shadow: 0 6px 24px rgba(0,0,0,0.1);
Dark Mode preset · #000000 bg @ 0.45, blur 20, radius 16
background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.25);
Tailwind v4 · same default settings
bg-[rgba(255,255,255,0.25)] backdrop-blur-[16px] backdrop-saturate-[180%] border-[1px] rounded-[24px]
Edge case · opaque background = no glass
Drag Background Opacity to 1.00 and the effect dies: a fully opaque rgba(255,255,255,1) fill hides everything behind the card, so the blur has nothing visible to act on. backdrop-filter still computes but you see a solid panel. Keep background opacity roughly 0.2–0.55 — the range every built-in preset uses.
Preset reference values
The four built-in presets map to exact slider values. Use them as a starting point, then fine-tune.
| Preset | BG opacity | Blur | Saturation | Radius |
|---|---|---|---|---|
| Subtle iOS | 0.20 | 14px | 180% | 20px |
| Vibrant Card | 0.35 | 24px | 220% | 32px |
| Dark Mode | 0.45 | 20px | 160% | 16px |
| Heavy Frost | 0.55 | 40px | 200% | 28px |
Where glassmorphism works best
| UI Context | Why It Works There |
|---|---|
| Navigation bar over hero image | Lets the hero photo show through softly while keeping nav text legible |
| Card overlay on gradient background | Cards float visually without flat-fill cutting the gradient |
| Modal / dialog backdrop | Page context stays visible behind the modal; reduces context-loss feel |
| Toast notification | Quick alerts that do not fully cover content underneath |
| iOS-style control bar | Native-feel on mobile web apps; matches platform conventions |
Browser support for backdrop-filter
| Browser | Status | Notes |
|---|---|---|
| Chrome 76+ | Full | backdrop-filter unprefixed since 76; -webkit- prefix accepted as alias |
| Safari 9+ | Full | Requires -webkit-backdrop-filter prefix on older versions; native since macOS 11 |
| Firefox 103+ | Full | Unprefixed support; enabled by default since v103 (Aug 2022) |
| Edge 17+ | Full | Chromium-based since Edge 79; consistent with Chrome |
| Samsung Internet 12+ | Full | Full unprefixed support on modern Android |
Baseline Newly Available since September 16, 2024 (web.dev); ~95% of global users on modern browsers. Safe in production with the -webkit- prefix included.
The detail most generators skip: the shadow is derived from the radius
This tool does not give the box-shadow its own offset and blur sliders. Instead it computes them from your Border Radius: the vertical offset is round(radius / 4)px and the shadow blur is round(radius)px, at your chosen Shadow Opacity. So a 24px radius emits 0 6px 24px rgba(0,0,0,0.1), and a 32px radius emits 0 8px 32px. Rounder, larger cards automatically get a proportionally larger, softer drop shadow — keeping elevation visually consistent without a fourth set of sliders to manage.
One performance gotcha worth citing: backdrop-filter re-composites the pixels behind the element through a blur pass every frame, so the GPU does roughly double the draw work. Mobile devices handle 3 to 5 simultaneous blurs comfortably; past that, low-end phones drop frames. Keep blur radius under about 20px and limit the number of glass surfaces on one screen.
Verify text contrast on the finished surface
The hardest part of glassmorphism is legibility. The W3C WCAG 2.1 contrast rules set the minimums below. Crucially, you must test the ratio against the blurred backdrop as it actually renders, not just the flat rgba() fill — a 25% white panel over a busy photo can still fail AA.
| WCAG level | Normal text | Large text (≥18.66px bold / 24px) |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
If text fails, raise the background opacity to 0.35–0.45, add a subtle text-shadow, or run the result through our Color Contrast Checker against the dominant backdrop color.
Runs 100% in your browser
Your data never leaves your device. The CSS is built locally in JavaScript and copied with your browser's native clipboard — no uploads, nothing leaves your device. The Custom background image is read with FileReader into a data URL applied to a div; you can confirm in DevTools that no network request follows the upload, and it clears on refresh. I tested every preset, all four preview backgrounds, and the full slider ranges — blur 0–40px, saturation 100–300%, radius 0–64px — and verified the emitted CSS matches the live preview exactly, including the -webkit- prefix for Safari.
Frequently asked questions
Is this glassmorphism generator free?
Yes — 100% free, no signup, no usage cap. Every slider, all four presets, the custom-background upload, and both exports are unlocked, and the CSS is yours to use in personal or commercial work.
Why does my glass card show no blur?
Usually because nothing sits behind it — backdrop-filter only blurs lower content in the stacking context — or because the background is fully opaque. Set the background to rgba() with alpha below 1.0, and on Safari confirm the -webkit- prefix is present.
When should I NOT use glassmorphism?
Skip it for primary text blocks, form inputs, busy high-contrast backgrounds, and print stylesheets. Reserve it for nav bars, floating cards, modal backdrops, and toasts — places where seeing context through the surface adds value.
Why is the Tailwind output using arbitrary values?
Because the exact blur often falls between Tailwind v4 presets — 14px sits between backdrop-blur-md (12px) and backdrop-blur-lg (16px). To match the preview exactly the tool emits backdrop-blur-[14px]; snap to a named preset if you prefer.
Related CSS & color tools
Build the mesh gradient under your glass cards
CSS Box Shadow GeneratorLayer a custom drop shadow for depth
CSS Filter GeneratorTune blur, brightness & saturation filters
Border Radius GeneratorDial in the corner radius for the card
Color PickerSample the brand tint for the semi-transparent fill
Color ConverterConvert your HEX fill to RGB or HSL
Color Contrast CheckerVerify WCAG contrast on the glass surface
Color Palette GeneratorPick a harmonious palette for the UI
Color MixerBlend two tints for the overlay fill
Guide: HEX, RGB, HSL & OKLCHUnderstand color models behind your fill
All ToolsBrowse the full free toolk collection
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.