Glassmorphism Generator
Create a frosted glass panel by setting the blur strength, the tint colour and its opacity, the border brightness and the corner radius. The preview places the panel over colour, so the blur is visible as you adjust it.
The output uses backdrop-filter from the W3C Filter Effects Module Level 2, with the Safari prefix included. The code is generated in your browser and nothing is sent to a server.
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);bg-[rgba(255,255,255,0.25)] backdrop-blur-[12px] border border-[rgba(255,255,255,0.2)] rounded-[16px] shadow-[0_8px_32px_rgba(0,0,0,0.12)]How to use it
- Raise the blur to soften what is behind the panel. Values from 8 to 16 px suit most cards.
- Choose a tint colour and set its opacity. White at 20 to 30 percent is the classic look.
- Adjust the border opacity and the corner radius to match your card style.
- Copy the CSS, or copy the Tailwind classes if your project uses utility classes.
About the CSS behind it
The glass look comes from two properties working together. backdrop-filter: blur() softens the pixels behind the element, and a translucent background lets them show through. The backdrop filter function is defined in the W3C Filter Effects Module Level 2. The MDN page for backdrop-filter lists current browser support.
The thin light border helps the edge of the panel read against the background, and the soft shadow lifts it off the page. The shadow is fixed in this generator to keep the output short. Change it with a larger box-shadow if your design needs more depth.
Glass panels are heavy to paint when they cover a large area or sit over moving content. Keep the blur at the smallest value that gives the effect, and avoid stacking several blurred layers.
Frequently asked questions
- What does backdrop-filter do that filter does not?
- filter changes the element itself and everything inside it. backdrop-filter changes only what is behind the element, so content underneath is blurred while the element stays sharp. That is why glass panels need backdrop-filter.
- Why does my glass effect not show in Firefox?
- Older Firefox releases did not support backdrop-filter. Newer releases do, and the generator also writes -webkit-backdrop-filter for Safari. Where it is not supported, the panel still shows its tint, so keep the tint opaque enough to read on its own.
- Why does the glass look flat on a plain background?
- Backdrop blur only shows something when there is content behind the panel. Place the panel over an image, a gradient or coloured shapes. On a solid white page, a blur has nothing to blur, and the panel looks like a light box.
- Is glassmorphism accessible for text on top?
- It needs care. The text sits on a changing background, so contrast can drop where a bright part of the image shows through. Raise the tint opacity until the text meets WCAG contrast for its size, and use a larger font weight for small labels.