Glassmorphism CSS Generator with Preview
Adjust blur, transparency, border, and shadow to create a frosted-glass CSS effect. Preview the settings and copy the generated styles.
CSS Glassmorphism Generator workspace
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 account is required. The tool runs in your browser, and no request or analytics event contains your settings or custom background image.
CSS Glassmorphism Generator: build a frosted-glass card and copy the CSS
Adjust blur, transparency, border, and shadow to create a frosted-glass CSS effect. Preview the settings and copy the generated styles. Backdrop effects depend on the content behind the element. Review the result on both light and dark backgrounds and provide an appropriate fallback where necessary. Check text contrast with the actual background; translucency can make a single color-pair test misleading.
How to use the glassmorphism generator
- 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.
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: September 15, 2026 · Runs 100% in your browser — no uploads, tool input is not sent to Toolk.
Frequently asked questions
Why does my glass card show no blur at all?
Two usual causes. Either nothing sits behind the element — backdrop-filter only blurs lower content in the stacking context — or the background fill is fully opaque, which hides the layer the blur is supposed to act on. Keep the rgba() alpha below 1.0 (the presets use 0.20–0.55), and on Safari check that the -webkit-backdrop-filter prefix made it into your stylesheet.
When should I skip glassmorphism entirely?
Avoid it for body text blocks, form inputs, and any surface over a busy photo where legibility matters — WCAG contrast against a blurred backdrop is easy to fail. Reserve it for nav bars, floating cards, modal overlays, and toasts, where seeing context through the surface genuinely helps.
Does backdrop-filter work in every browser now?
It reached Baseline Newly Available in September 2024 per web.dev tracking, with Safari as the last holdout requiring the -webkit- prefixed form. This generator always writes both declarations, so the copied CSS renders consistently across Chrome, Edge, Firefox, and Safari.
Will stacking several glass panels slow my page down?
It can. backdrop-filter re-blurs the pixels behind an element every frame, roughly doubling GPU draw work for that region. Three to five glass surfaces render comfortably on modern phones; past that, keep individual blur radii under about 20px and test on real low-end hardware before shipping.
Is the custom background image uploaded anywhere?
No. The image is read with the browser FileReader API into a local data URL and applied straight to a preview div — Toolk’s page analytics do not receive it, no network request follows the pick, and the reference clears on refresh.