s. smpl.
tools / ● Design / glass-generator

Glassmorphism CSS.

Visually generate frosted-glass CSS effects for your UI.

Preview Box

Adjust three sliders — blur, transparency, and border opacity — and watch the frosted-glass effect update in real time against a colourful preview background. When you're happy with the look, copy the ready-to-use CSS and paste it straight into your stylesheet.

How to use

Use the three sliders to adjust Blur Amount, Transparency, and Border Opacity. The preview box updates live. Copy the generated CSS from the text box at the bottom of the controls panel.

Examples

Subtle glass blur(6px) · opacity 0.15 · border 0.08
Standard frosted blur(10px) · opacity 0.20 · border 0.10
Heavy frost blur(24px) · opacity 0.35 · border 0.20

FAQ

Why doesn't the effect look like glass on my site?

Glassmorphism requires a colourful or image-based background behind the element. On a plain white background, the blur has nothing to act on and the effect isn't visible.

Is backdrop-filter supported in all browsers?

Yes — in all modern browsers (Chrome, Firefox, Safari, Edge). The generated CSS includes the -webkit- prefix for Safari automatically.

Related tools

Gradient Maker Build CSS linear, radial, or conic gradients with a live preview. Adjust colours and direction, then copy the CSS. Shadow Generator Generate CSS box-shadows with live preview. Add multiple shadow layers for depth and realism, then copy the CSS. Base64 Encoder Encode or decode Base64 text instantly in your browser. Nothing is sent to any server.

Privacy and data handling

This tool runs entirely in your browser. Nothing you type or paste is sent to any server — all processing happens locally on your device.