What is glassmorphism and how do I build it in CSS?
Glassmorphism is the frosted-glass effect popularized by macOS Big Sur, the iOS Control Center, Windows 11. A card looks like it is made of tinted, blurred glass that lets the background show through. It is a modern UI standard for overlays, sidebars, navbars and modals.
In CSS it is a stack of a few properties: `backdrop-filter: blur()` blurs whatever sits behind the element, a translucent background adds the tint, a 30% white border fakes the glass rim, a soft shadow lifts the element off the background.
Here you pick a colorful background (gradient or pseudo-photo) and see the effect live. Sliders control blur strength, saturation of colors behind the glass, tint color and alpha. Output is a ready `.glass {...}` CSS block.
How to use
- Pick a background from the tiles (gradients, synthetic photo). The background must be colorful and varied for the blur to show.
- Blur = strength of the blur (16-24px is modern, 30-40px is the heavy frosted-glass look).
- Saturate = saturation of colors behind the glass (100% = original, 180% = boosted, gives the premium feel).
- Tint + alpha = light coloring of the glass. White with alpha 0.1-0.3 for light mode, black with alpha 0.3 for dark.
- Border at 30% white alpha simulates the glass rim. Shadow lifts the card off the background. Copy the CSS and paste into your stylesheet.
When this helps
Glassmorphism is a standard in modern design, especially for overlay UI. A few places where it shines:
- Navbar over a photo hero. Transparent and blurred navbar, content scrolls underneath, you see it through the glass.
- Modal / dialog box. Card floats above a dimmed backdrop with the blurred background visible through the glass.
- App sidebar (Notion, Linear). Especially on the right side over content.
- Cards in a hero section. Three feature cards with the frosted glass effect on a colorful background.
- Music player overlay. Apple Music / Spotify desktop is a textbook glassmorphism case.
- Notification toast. A slightly blurred backdrop keeps the toast readable without hiding context.
Remember: glassmorphism needs color behind the glass. Over a plain white background the effect is invisible. Best results are over photography, gradients or a colorful section. For plain blur without tint see box-shadow. For corner rounding use border-radius.