Glassmorphism CSS generator
Blur, transparency and border with a live preview.
FreeRuns in your browserNo signupUpdated 2026-10-29
backdrop-filter is expensive to paint. Use it on a few elements, not on every card in a list.
Preview
Frosted glass card
The shapes behind this card are blurred through it.
.glass {
background: rgb(255 255 255 / 35%);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border: 1px solid rgb(255 255 255 / 40%);
border-radius: 20px;
box-shadow: 0 8px 32px rgb(0 0 0 / 12%);
}bg-[#ffffff]/35 backdrop-blur-[12px] backdrop-saturate-[140%] border border-[#ffffff]/40 rounded-[20px] shadow-lg
About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
This glassmorphism generator builds the frosted-glass panel effect: a semi-transparent fill, a backdrop blur that softens whatever sits behind the panel, and a faint border that catches the light. Adjust each part with sliders and see the result over three different backdrops, a bright gradient, dark shapes and a pale grey. The output includes the CSS, with the -webkit- prefix for older Safari versions, plus matching Tailwind classes.
How to use it
- Set the blur. Around 8 to 16px gives a clear frosted look.
- Set the fill opacity. Lower values let more of the background show.
- Adjust the border opacity and saturation until the edge and colours look right.
- Pick the backdrop closest to your real page and check that the text stays readable.
- Copy the CSS or the Tailwind classes.
How to read the result
The defaults produce background: rgb(255 255 255 / 35%), backdrop-filter: blur(12px) saturate(140%) and a 1px border at 40% white. In plain terms: the panel is white at 35% opacity, so 65% of the backdrop shows through. Whatever shows through is blurred by 12px and made 40% more saturated, which stops colours turning grey under the white wash. The brighter edge line separates the panel from the background.
The effect depends entirely on what is behind the panel. On the busy gradient it looks like glass. On the pale grey backdrop it nearly disappears, because there is nothing to blur. Glass panels need colourful or detailed content behind them.
Check text contrast against the lightest and darkest parts of the backdrop, not the average. White text on 35% white glass can fail WCAG over a pale area; raise the fill opacity until it passes.
Backdrop filters cost GPU time. A header or a single modal is fine; dozens of glass cards in a scrolling list can make low-end phones stutter.
Create a colourful background for the panel with the CSS gradient generator. For a full interface design, see website design and development.
Questions
Frequently asked.
Does backdrop-filter work in all browsers?
Yes, in all current versions of Chrome, Edge, Firefox and Safari. Older Safari versions need the -webkit-backdrop-filter prefix, which the output includes. Where it is not supported, the panel shows the semi-transparent fill without the blur, which is still usable as long as the text contrast holds up.
Why does my glass effect not blur anything?
The backdrop filter only blurs what is visually behind the element. If the panel sits on a plain background there is nothing to blur. Also check that the fill is not fully opaque, because at 100% opacity the blurred backdrop is hidden behind it.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide