Glassmorphism generator
Create frosted glass effects for modern UI with adjustable blur, tint, and radius.
Tip: Always include -webkit-backdrop-filter for Safari support. Upload your own background image to see exactly how the glass effect will look in your design. Try Randomize to discover unique combinations.
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}Five sliders and a colour picker drive a real frosted-glass card sitting on a real background, and the CSS updates under it as you drag. The effect is the standard recipe — a translucent background, a backdrop-filter blur, a faintly visible one-pixel border and a soft drop shadow — but the point of doing it here is that you can see it over something. Glass looks like nothing at all on a flat page; it only reads as glass when there is colour and contrast behind it to distort. So the preview ships with five generated backgrounds, or you can drop in your own image, and switch the card between a plain panel, a login form, a pricing card and a notification to check that text stays legible at the opacity you chose.
Key facts about Glassmorphism generator
| Controls | Blur 0-40 px, background opacity 0-100 %, border opacity 0-100 %, corner radius 0-100 px, shadow opacity 0-50 %, plus a tint colour picker |
|---|---|
| Tint and border share one colour | The border is the same hex as the background with a different alpha, which is what keeps the edge looking like the lit rim of a pane rather than an outline drawn on top |
| Shadow | Fixed at 0 8px 32px black with only the alpha adjustable; set shadow opacity to 0 and the box-shadow line is left out of the output entirely |
| Property emitted | backdrop-filter with a -webkit-backdrop-filter duplicate on the line above it, because Safari has needed the prefix since the effect first shipped |
| Output formats | CSS (a .glass rule), SCSS (four variables plus the rule) and Tailwind (a div with arbitrary-value classes) |
| Tailwind output shape | backdrop-blur-[Npx], bg-[rgba(...)], border-[rgba(...)] and rounded-[Npx] — arbitrary values, so it needs Tailwind 3 or later |
| Presets | 12, from Subtle Glass at 8 px blur to Heavy Blur at 32 px, including four tinted variants and a pill-shaped one at 100 px radius |
| Preview backgrounds | 5 generated gradient and mesh scenes, plus your own uploaded image — PNG, JPG, WebP, SVG or HEIC |
| Card layouts | 4 — plain panel, login form, pricing card and notification, so you can judge legibility with real text on top |
| Viewport widths | Preview at full width, 768 px or 375 px, plus a fullscreen mode that closes with Escape |
| History | The last 20 settings are kept and restorable, so randomise and preset browsing are non-destructive |
| Download | Saves as glassmorphism.css, .scss or .html depending on the selected output format |
What happens to your file
Everything here is CSS and a preview, so there is nothing to upload — but the background image is worth a word. If you drop one in, it is read with a FileReader into a data URL and applied as a CSS background inside this tab; it is never posted anywhere, never stored, and it disappears when you reload. A HEIC or HEIF file is decoded by a WebAssembly converter that also runs locally. The generated code is assembled from template strings in the page bundle and put on your clipboard or into a blob download directly. No account, no project saving, no request of any kind once the page has loaded.
About this tool
- 1
Put something behind the glass
Pick one of the five backgrounds or upload the image your design will actually sit on. Tuning blur over a flat colour is guesswork, because the whole effect is a distortion of what is underneath.
- 2
Set blur and opacity together
These two do the real work. More blur with less opacity reads as thick frosted glass; less blur with more opacity reads as tinted plastic. Around 16 px blur at 20-25 % opacity is the look most interfaces mean by glassmorphism.
- 3
Add the edge
Border opacity draws a one-pixel line in the same tint. Somewhere between 20 and 40 % gives the pane an edge without turning it into an outlined box. Corner radius sets how soft the card is — 100 px turns it into a pill.
- 4
Check it with real content
Switch the card to the login or pricing layout. Body text on glass is where the effect usually fails: if the small grey line is hard to read, raise the background opacity rather than darkening the text.
- 5
Test the narrow widths
Drop the preview to 375 px. A blur that looks refined on a wide hero is often too heavy on a phone-width card, where the element covers most of the background it is meant to be sampling.
- 6
Copy the format you build in
Take the plain CSS rule, the SCSS variables if you want the values named, or the Tailwind class list to paste straight onto an element. The download saves the same output with the right extension.
| Core property | backdrop-filter: blur(), which blurs what is behind the element rather than the element itself |
|---|---|
| Browser support | Chrome and Edge since 76, Safari with the -webkit- prefix since 9, Firefox since 103. Both lines are emitted, so no manual prefixing is needed |
| Requires transparency | The blur only shows through the element's own background alpha — at 100 % opacity the effect is invisible |
| Requires something behind | There is nothing to blur over a flat solid parent; the effect needs an image, gradient or overlapping content underneath |
| Stacking caveat | backdrop-filter creates a containing block and can be cancelled by an ancestor with overflow: hidden or its own filter |
| Performance | A live GPU blur per painted frame — cheap for a few cards, expensive on a long scrolling list or behind an animation |
| Tailwind version | 3 or later for arbitrary values in square brackets |
| Network | None after page load |
- Keep a solid fallback background on the same rule. In a browser where backdrop-filter is unavailable or disabled, a 20 % white card over a photo becomes unreadable — a slightly more opaque plain background is the graceful degradation.
- Text contrast is measured against what is actually behind the glass, not against your tint. A pale card over a busy photo can pass a contrast check in one corner and fail in another.
- Limit the number of glass elements on a screen. Each one is a live blur of everything behind it, recomputed while scrolling, and phones feel it quickly.
- If the blur suddenly stops working, look up the DOM tree: an ancestor with its own filter, transform or overflow: hidden can break the backdrop chain.
- The shadow here is fixed at 0 8px 32px and only its alpha changes. If you need a tighter or coloured shadow, take the rest of the rule from here and write the box-shadow line yourself.
- Dark glass over a dark background needs a much more visible border than light glass, otherwise the card's edges simply vanish. Push border opacity up instead of raising the fill.
- Use randomise and the history list together: generate a dozen variations quickly, then step back to the two you liked instead of trying to remember the slider positions.
- Upload the real hero image before you sign off the values. A gradient preview flatters the effect in a way that a photograph with hard edges does not.
- Live preview over real backgrounds
- Five-slider control of blur, opacity, border, radius and shadow
- CSS, SCSS and Tailwind output
- Automatic -webkit- prefix
- 12 presets and a randomiser
- Custom background image upload
- Four card layouts and three viewport widths
- 20-step history
- Design a frosted navigation bar or hero card and hand the developer a copy-ready rule.
- Find the opacity at which body text on a glass panel is still readable over your own photography.
- Convert an existing glass design into Tailwind arbitrary-value classes.
- Check how a translucent card behaves at phone width before building it.
- Produce several tinted variants of the same panel for a dark and a light theme.
- Explain to a colleague why their glass card looks flat by showing the same values over a background with contrast.
Related tools
View allWorks well with this5
More in CSS & Design12
Updated