CSS Glassmorphism Generator
Design a frosted-glass card over a real background, see straight away whether text on it is readable, and copy the CSS — with the Safari prefix and fallbacks already written.
At a glance
- Writes the glass effect with backdrop-filter (blur and saturation), a see-through tint, a light border, a shadow, an optional sheen and grain.
- Checks text contrast on the glass as you work: it blurs, saturates and tints the background under the card, as the browser does, and reports the lowest ratio against the WCAG AA 4.5:1 target — with the tint opacity that would fix it.
-webkit-backdrop-filteris written first: Safari needed the prefix until Safari 18. Chrome has supported backdrop-filter since version 76 and Firefox since version 103.- Optional fallbacks give a solid, readable background to browsers that cannot blur and to people who switch on Reduce transparency (the
prefers-reduced-transparencymedia query, in Chrome and Edge since version 118). - Copy CSS, Tailwind CSS v4 classes, a React style object or a complete demo page. Every Tailwind class was checked against Tailwind’s own compiler.
- Try the glass on five built-in backgrounds or on your own photo, which stays on your device.
Step by step
How to make a glassmorphism effect in CSS
- 1
Pick a preset
Start from Frosted, Dark glass, Colour tint, Acrylic or Smoke.
- 2
Choose a background
Try the built-in backgrounds, or Use your own photo — a screenshot of the page where the glass will sit is best.
- 3
Adjust the glass
Set the tint and its opacity, the blur and saturation, the corners, border, shadow, sheen and grain. Drag the card around the preview.
- 4
Check the text
Read the contrast line under the preview. If it is below 4.5:1, use the suggested tint opacity or change the text colour.
- 5
Copy the code
Choose CSS, Tailwind, React or Demo page, then Copy or Download.
Features
Everything you need, nothing you don’t
Readable glass, not just pretty glass
Light text on light glass is the classic glassmorphism mistake. The contrast check follows the card as you drag it and suggests the tint opacity that makes text pass.
A real background
Blur is only visible over something with edges. The backgrounds have colour blobs and sharp shapes, and you can drop in a screenshot of your own site.
Production-ready CSS
Prefixed for older Safari, layered backgrounds one per line, fallbacks with a colour that keeps your text readable, and nothing you switched off.
Tailwind and React too
Named Tailwind utilities where they exist (backdrop-blur-lg, rounded-3xl) and exact arbitrary values where they do not; React gets a style object with WebkitBackdropFilter.
Presets to start from
Frosted, dark glass, colour tint, acrylic with grain and smoke — each one readable on its background.
Private
Everything runs in your browser. Your photo is never uploaded, and your settings are saved only on this device.
What glassmorphism is
Glassmorphism is a style of interface where cards, menus and panels look like frosted glass: you can see colours and shapes behind them, softly blurred, while text on top stays sharp. Apple uses it across macOS and iOS, Windows calls its version acrylic, and it became a web design trend in 2020.
In CSS the effect comes from one property, backdrop-filter, which blurs whatever is behind an element. It only shows when the element’s own background is partly transparent — a solid background hides the blur completely.
The CSS behind the effect
| Property | Typical value | What it does |
|---|---|---|
background | rgba(255, 255, 255, 0.25) | the tint: a see-through colour; lower opacity shows more of the background |
backdrop-filter | blur(16px) saturate(180%) | blurs what is behind; saturation above 100% makes those colours richer |
-webkit-backdrop-filter | the same | the same, for Safari before version 18 |
border | 1px solid rgba(255, 255, 255, 0.45) | a light edge that separates the glass from the background |
box-shadow | 0 6px 21px rgba(0, 0, 0, 0.14) | lifts the card; an inset line can add a bright top edge |
border-radius | 24px | rounded corners, typical of glass surfaces |
Keeping text readable on glass
Text on glass sits on a background that changes from place to place, so it can be readable in one corner and not in another. WCAG 2 asks for a contrast of at least 4.5:1 for normal text and 3:1 for large text. This tool measures the glass over the whole card and reports the weakest spot.
If text is hard to read, raise the tint opacity, blur more (which evens out the background), switch between dark and light text, or give the text its own slightly darker or lighter panel.
Browser support
Figures from MDN’s browser compatibility data, October 2026. Browsers without the media query simply ignore it, so the fallback is safe to keep.
| Browser | backdrop-filter | prefers-reduced-transparency |
|---|---|---|
| Chrome and Edge | since version 76 | since version 118 |
| Firefox | since version 103 | behind a setting only |
| Safari (macOS and iOS) | since 18; with -webkit- since 9 | not supported |
FAQ
Frequently asked questions
Why does my backdrop-filter blur not show?
Do I still need -webkit-backdrop-filter?
backdrop-filter. Keeping both lines costs nothing, so the tool writes both.How do I make glassmorphism in Tailwind CSS?
bg-white/25 backdrop-blur-lg backdrop-saturate-180 border border-white/45 rounded-3xl. Open the Tailwind tab to get the classes for your exact settings.Is glassmorphism bad for performance?
What is the difference between glassmorphism and neumorphism?
What does “Reduce transparency” do with my glass?
prefers-reduced-transparency media query, in a colour that keeps your text readable.Can it make Apple’s “Liquid Glass” look?
Is my photo uploaded?
Keep going
Related tools
CSS Neumorphism Generator
Free neumorphism generator: soft UI box-shadows from any colour and light angle, with contrast checks, pressed states, Tailwind classes and a UI kit.
Bento Grid Generator
Free bento grid generator: draw tiles with the mouse, preview desktop, tablet and phone, and copy responsive CSS Grid, Tailwind or React code.
CSS to Tailwind Converter
Convert CSS to Tailwind classes online: hover, media queries, dark mode and gradients become variants, colours match the palette. Tailwind v4 and v3, free.
Image Color Picker
Pick colours from any image: get HEX, RGB, HSL and CMYK codes with a zoom loupe, plus the image’s colour palette. Free, private — nothing is uploaded.
Scroll Animation Generator
Free scroll animation generator: fade, slide, zoom and reveal effects with CSS scroll-driven animations, parallax and progress bars, plus a Firefox fallback.
Image Compressor
Compress JPG, PNG, WebP and AVIF images online for free. Shrink photos by up to 90% or hit an exact KB target — right in your browser, with no upload.
Last updated Report a problem or suggest a feature