DevTools Hub
DevTools Hub

CSS Glassmorphism Generator

Create frosted glass UI effects visually. Adjust blur, transparency, border, and radius — then copy the CSS code with Safari support.

Live Preview

Glass CardFrosted glass effect using backdrop-filter

Controls

16px
20%
25%
16px
#ffffff

CSS Code

background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.25);
ⓘ

Browser Support

backdrop-filter is supported in Chrome 76+, Edge 79+, Firefox 103+, Safari 9+ (with -webkit- prefix), and Opera 63+. Global support is over 95%. The generated CSS includes the -webkit-backdrop-filter prefix for Safari compatibility.

Presets

Glassmorphism Properties

PropertyDescriptionTypical Values
backdrop-filter: blur()Blurs the area behind the element4px – 32px
background: rgba()Semi-transparent background color0.05 – 0.4 alpha
borderSubtle border for edge definition1px solid rgba(255,255,255,0.2)
border-radiusRounded corners for the glass card8px – 24px
-webkit-backdrop-filterSafari prefix for backdrop-filterSame as backdrop-filter

Related Tools

Color Palette Generator
Generate beautiful color palettes with hex, RGB, and HSL values
CSS Gradient Generator
Free CSS gradient generator with visual editor. Create linear and radial gradients with color stops, transparency, angle picker, 24 presets, cross-browser CSS output, and PNG download.
CSS Minifier & Beautifier
Minify CSS to reduce file size or beautify for readability with hex shortening and zero-unit removal
Color Picker
Free online color picker with visual selector. Convert between HEX, RGB, HSL, CMYK. Generate harmonious color palettes. Copy CSS color codes instantly.

Frequently Asked Questions

What is glassmorphism in CSS?

Glassmorphism is a UI design trend that creates a frosted glass effect using CSS backdrop-filter: blur() combined with a semi-transparent background. The blurred background shows through the element, creating a modern, layered look popular in dashboards, cards, and navigation bars.

How does backdrop-filter work?

The CSS backdrop-filter property applies graphical effects like blur, brightness, or contrast to the area behind an element. For glassmorphism, backdrop-filter: blur() is used to blur whatever appears behind the element, while the element itself has a semi-transparent background color.

Is backdrop-filter supported in all browsers?

backdrop-filter is supported in Chrome, Edge, Safari, Firefox, and Opera. Safari requires the -webkit-backdrop-filter prefix. This generator includes both the standard and -webkit- prefixed versions for maximum compatibility. Global browser support is over 95%.

How do I create a glassmorphism effect?

Combine three CSS properties: a semi-transparent background (e.g., rgba(255, 255, 255, 0.2)), backdrop-filter: blur(16px) for the frosted effect, and a subtle border with a semi-transparent color. Add border-radius for rounded corners. The element must be placed over a colorful background for the effect to be visible.