CSS Glassmorphism Generator
Create frosted-glass CSS: translucent tint, backdrop-filter blur and saturation with the -webkit- prefix, border, radius and shadow, with a preview.
Glassmorphism makes a panel look like frosted glass: the page behind it shows through, blurred and slightly more vivid, under a thin translucent tint and a light border. The effect relies on the CSS backdrop-filter property. This generator writes the complete rule — translucent background, backdrop-filter: blur() saturate() with the -webkit- duplicate Safari needed, border, radius and shadow — and shows the card over a colorful backdrop.
How to use this tool
- Choose the tint color and its opacity (10–30% works for most designs).
- Set the blur and saturation of what shows through.
- Adjust the border opacity, corner radius and shadow.
- Copy the CSS and place the element over an image or gradient — on a plain background the glass is invisible.
Formula
background: rgba(tint, opacity) · backdrop-filter: blur(<px>) saturate(<%>) · border: 1px solid rgba(tint, border opacity)
The blur radius is the standard deviation of the Gaussian blur. saturate(180%) boosts the colors behind the glass by 1.8×. The preview imitates backdrop-filter with SVG filters because image previews cannot run it.
Example
The defaults give background: rgba(255, 255, 255, 0.2) — white at 20% — with backdrop-filter: blur(12px) saturate(180%), a 1 px border of white at 30%, 16 px corners and a soft 0 8px 32px shadow. A dark variant with black at 35% and an 8 px blur at 100% saturation drops the saturate() step and keeps only blur(8px).
Frequently asked questions
Why is my glass effect not visible?
backdrop-filter only affects what is behind the element. On a plain single-color page there is nothing to blur, so the card just looks semi-transparent. Put it over a photo, a gradient or overlapping shapes.
Is backdrop-filter bad for performance?
It costs more than a normal background because the browser re-blurs the content behind the element every frame it changes. A few glass panels are fine; avoid large blurred areas over scrolling or animated content on low-end phones.
Is frosted glass accessible?
Only if the text stays readable. Busy backgrounds lower the contrast unpredictably, so use enough tint opacity and blur, and check the text color against the darkest and lightest parts of the backdrop.
Sources
Last updated:
Page address with these inputs: https://kakao.mobile/tools/css-glassmorphism-generator/
Cite or embed this tool
kakaoCalc. (2026, November 8). CSS Glassmorphism Generator. https://kakao.mobile/tools/css-glassmorphism-generator/
“CSS Glassmorphism Generator.” kakaoCalc, 8 Nov. 2026, kakao.mobile/tools/css-glassmorphism-generator/.
Paste this code into your page. The widget runs in your visitors' browsers, shows no ads and keeps a link back to this page. Embedding terms