Glassmorphism

Frosted glass and soft UI with backdrop-filter and layered shadows

Glass Cardbackdrop-filter preview
background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(12px) saturate(150%) brightness(110%);
-webkit-backdrop-filter: blur(12px) saturate(150%) brightness(110%);
border: 1px solid rgba(255, 255, 255, 0.38);
border-radius: 16px;

About this tool

What is glassmorphism and how does this tool help?
Glassmorphism is a CSS UI style using backdrop blur, semi-transparent backgrounds, and subtle borders to create frosted-glass card effects. The generator lets you tune blur, opacity, and border settings and copies the CSS.
Which CSS properties does it generate?
backdrop-filter: blur(...), background: rgba(...), border: 1px solid rgba(...), and border-radius. Some configurations also include a -webkit-backdrop-filter fallback for older Safari.
Does backdrop-filter work in all browsers?
backdrop-filter is supported in all modern browsers including Safari. Internet Explorer does not support it. The generator notes browser support for each setting.
Can I preview on a custom background?
Yes. Change the preview background to a solid color, gradient, or custom image URL to see how the glass effect will look over your actual content.
About

Glass mode renders backdrop-filter with blur + saturation + brightness against a chosen gradient scene. Neumorph mode generates the soft inner/outer shadow pair.

backdrop-filter requires the parent to have content behind it — that's why we render against a colorful scene.

Related tools

Border Radius

Visualize and generate CSS border-radius values.

◱

Border Radius

Visualize and generate CSS border-radius values.

Open →

Box Shadow

Design CSS box shadows with visual controls.

▣

Box Shadow

Design CSS box shadows with visual controls.

Open →

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

⬡

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

Open →

Color Palette

Generate harmonious color palettes with multiple harmony rules.

🎨

Color Palette

Generate harmonious color palettes with multiple harmony rules.

Open →
View all tools →