Developer Tools New Tool

Free Online CSS Glassmorphism Generator, Frosted Glass Panels

Set the panel background alpha, the backdrop-filter blur and saturation, the border colour and the radius, then read the finished rule with the -webkit- line included. The preview sits on a busy backdrop drawn entirely in CSS, so you can see what the blur is really doing instead of guessing.

Free Forever Nothing Uploaded Blur, saturate, border, radius Runs in your browser

Free Online CSS Glassmorphism Generator, Frosted Glass Panels

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Glassmorphism Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Frosted panel

The shapes and colours behind this card are drawn in CSS. Turn the backdrop off to see how much of the effect was borrowed from them.

CSS

Glass Tint Alpha 0.14 Blur 12px Saturate 140%

Edge Border 1px Colour 0.30 Radius 16px

Shadow Drop 8px Spread 32px Darkness 0.30 Inner highlight

Backdrop Busy backdrop behind the panel Wrap the output in a selector

A blurred backdrop is repainted as the page scrolls. Keep the count of glass panels small.

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

A fallback for browsers without backdrop-filter

The panel should still be readable when the blur is ignored.

If backdrop-filter is not supported, the declaration is dropped and your panel keeps only its background colour. At an alpha of 0.1 that leaves white text on whatever happens to be behind it, which can be unreadable. Guard the transparent version behind a feature query and make the default opaque enough to stand on its own:

.glass{
	background: rgba(255, 255, 255, .78);   /* readable with no blur */
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 16px;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){

	.glass{
		background: rgba(255, 255, 255, .14);
		-webkit-backdrop-filter: blur(12px) saturate(140%);
		backdrop-filter: blur(12px) saturate(140%);
	}
}

The feature query names both spellings, because Safari supports the prefixed property and older Safari versions do not recognise the unprefixed one at all. This page writes the two declarations for you, but it does not write the @supports wrapper, so add it yourself if the opaque fallback matters to you.

How to Build a Frosted Glass Panel in CSS

A few steps, and nothing is uploaded.

Set the tint and alpha Pick the panel colour, then drag the alpha down until the backdrop starts to show through. Around 0.1 to 0.2 is where glass usually sits; above 0.4 it reads as a tinted card instead.

Dial in the blur Blur is the effect. Saturate pushes the colours behind the panel back up, because a heavy blur averages them into something washed out.

Add the edge and shadow A thin light border and an optional inner highlight are what make the panel read as a pane of glass rather than a hole. The drop shadow lifts it off the backdrop.

Copy the rule The output carries both the prefixed and unprefixed backdrop-filter lines, in that order. Turn the backdrop switch off first to check the panel still works when there is nothing behind it.

What to Know About backdrop-filter

Including what it costs and when it shows nothing at all.

backdrop-filter costs real paint time. The browser has to sample everything behind the element, blur it, and do that again on every frame in which the area changes. On a long scrolling page a blurred panel is very often the single thing that makes a phone stutter, because the blurred region is re-composited as the content beneath it moves. One fixed header is usually fine; a list of twenty glass cards is not.

The effect is invisible if there is nothing behind the panel. Blur has nothing to blur on a flat background, so the panel just looks like a slightly tinted box. It needs a photograph, a gradient, or overlapping shapes underneath it. That is why the preview here is built on a deliberately busy backdrop, and why the backdrop switch is worth turning off once before you ship.

Safari still needs -webkit-backdrop-filter. Safari has supported the prefixed property far longer than the plain one, and some versions in the wild understand only the prefix. The output writes the prefixed line first and the standard line after it, so the standard one wins where both are understood. Do not delete either line to tidy up the rule.

This page styles one panel and does not read CSS back. You cannot paste an existing rule in and have the sliders move to match it, there is no dark and light variant, and the tool makes no accessibility judgement about the text you place on the glass. Contrast over a blurred photograph changes as the photograph changes, so check that yourself against the real image.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Blur and saturate Both backdrop-filter functions, with the values written out in full.

Alpha you can feel Tint colour and alpha as separate controls, output as rgba.

A backdrop worth blurring Overlapping gradients and hard-edged shapes, all drawn in CSS.

Edge and shadow Border width and colour with its own alpha, radius, drop shadow, inner highlight.

Both spellings The -webkit- line and the standard line, in the order that works.

Runs in your browser No image is loaded and nothing is sent anywhere. Works offline.

About the CSS Glassmorphism Generator

Glassmorphism is a small stack of properties rather than one: a background colour with a low alpha, a backdrop-filter that blurs and re-saturates whatever is behind the element, a pale hairline border, a generous radius and a soft shadow. Take any one of those away and the panel stops looking like glass. Get the alpha wrong and it looks like a grey box; get the border wrong and it looks like a hole cut in the page.

The hard part of building a generator for this was the preview. A frosted panel shown over a flat background is meaningless, because there is nothing for the blur to act on, so the preview here is painted on a deliberately noisy backdrop made from four overlapping radial gradients, a ring, a triangle and a set of diagonal stripes. All of it is CSS, so no image is fetched, and the blur you see is the browser blurring real pixels rather than a picture of the effect.

The output is a plain block of declarations. Both -webkit-backdrop-filter and backdrop-filter are written, because Safari has needed the prefix for a long time and still accepts it. There is a switch to wrap the rule in a class selector or to hand you the declarations bare, and nothing is minified. What the tool will not do is decide for you whether a blurred panel is worth its paint cost on the page you are building; the note above is as far as it goes.

Frequently Asked Questions

Alpha, blur radius, Safari, performance and fallbacks.

Almost always because there is nothing behind it. backdrop-filter blurs the content underneath the element, so on a flat white or flat dark page there is no detail to blur and all you see is the background colour at its alpha. Put a photograph, a gradient or some overlapping shapes behind the panel, or accept that the effect will not read on that layout.

For Safari, yes, keep it. Safari shipped -webkit-backdrop-filter years before the unprefixed property, and prefixed-only versions are still in use on older iOS devices that people do not update. The prefixed line goes first and the standard line second, so modern browsers use the standard one and nothing is lost by having both.

It is one of the more expensive things in CSS. The browser samples the region behind the element, blurs it, and must redo that work whenever the pixels underneath change, which on a scrolling page means constantly. One sticky header or one modal overlay is normally fine. A grid of glass cards in a long list is where phones start dropping frames, and reducing the blur radius helps less than reducing the number of blurred elements.

The declaration is ignored and the element keeps its background colour, which at a low alpha can leave text sitting on an unreadable backdrop. The safe pattern is to set an opaque enough background as the default and only drop the alpha inside an @supports query that tests both spellings of the property. The section above shows that wrapper; the generator itself outputs the declarations without it.

No. The page generates CSS from the sliders and does not parse CSS back into them. If you are adjusting a panel you already have, read the blur radius and alpha off the old rule, set them here, and take the new output. That is a real limitation, not something waiting to be added.