🧊
Glassmorphism CSS Generator
Create the popular frosted-glass (glassmorphism) effect with live control over blur, transparency, saturation, radius and border, previewed over a gradient. Copy the ready backdrop-filter CSS, including the -webkit- prefix.
Glass card
background: rgba(255, 255, 255, 0.25); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.25);
🔒 This tool runs entirely in your browser. Your data is never uploaded.
Frequently asked questions
What is glassmorphism?＋
A design style with a frosted-glass look — a translucent, blurred background behind a card, created with the CSS backdrop-filter property.
Why include the -webkit- prefix?＋
Safari needs -webkit-backdrop-filter, so the tool outputs both declarations for the widest support.
Does backdrop-filter work everywhere?＋
It's supported in all current major browsers, but the element needs something behind it to blur for the effect to show.