Micro Tools
Advertisement

Glassmorphism CSS

Build the frosted-glass look with live sliders for blur, transparency, border and radius. Preview the card on a colorful backdrop, then copy production-ready CSS.

Glass controls

Frosted glass needs backdrop-filter blur plus a translucent fill and border.

Preview and CSS
Glass cardDrag the sliders and watch me frost.
Advertisement

The three ingredients of frosted glass

Real glassmorphism needs three things: backdrop-filter: blur() to frost what is behind the card, a translucent white fill so the card reads as a surface, and a brighter 1px border on the top and left edges to fake light refraction. Miss any one and it looks like a plain translucent box.

Why the colorful backdrop matters

Backdrop blur has nothing to frost on a flat background, so glass cards only shine over photos, gradients or patterns. That is why this preview sits on a vivid gradient. On your site, place glass panels over hero images, video, or mesh gradients for the full effect.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Glassmorphism CSS FAQs

Does backdrop-filter work in all browsers?
Backdrop-filter works in all modern browsers. Safari needs the -webkit- prefix, which this tool includes. Firefox enabled it by default in version 103, so coverage is effectively universal in 2026.
My glass card looks invisible. What went wrong?
Two usual causes: the background behind the card is a flat color with nothing to blur, or the fill opacity is too low. Raise fill opacity toward 25 percent and put the card over an image or gradient.
How do I make a dark-mode glass card?
Swap the white fill for rgba(0, 0, 0, 0.35) and use a border of rgba(255, 255, 255, 0.18). Keep the blur the same. White text on top stays readable against the darkened frost.
Is backdrop-filter bad for performance?
It is GPU-accelerated and cheap for a handful of cards. Avoid applying it to dozens of elements or huge full-screen areas on low-end phones, where each blurred pixel costs battery.
Can I add a fallback for old browsers?
Yes. Put a solid semi-transparent background first, then the backdrop-filter line. Browsers that do not understand backdrop-filter simply ignore it and show the flat translucent card, which still looks fine.
Advertisement