Glassmorphism CSS. Frosted-glass card. Apple / iOS UI trend.
🪟 Preview

🪟 Glass Card

Soft frosted-glass card design

How to use

  1. Adjust blur and opacity (12 px / 20% is standard).
  2. Tune saturation 100–300% (180% recommended).
  3. Set radius and border.
  4. Pick a background gradient (5 presets).
  5. Copy CSS and use it.

Key features

  • Blur 0–40 px, opacity 0–80%
  • Saturate control — the glassmorphism secret
  • 5 gradient background presets
  • Border and radius adjustable
  • Live preview + instant CSS copy

Use cases

  • Website card UI — soft depth
  • Modals / popups — show background through
  • Dashboard widgets — modern look
  • Login forms — float over gradient backgrounds
  • iOS app UI — Apple native style

What is glassmorphism?

Glassmorphism is a 2020 UI trend mimicking frosted glass. Standardized by macOS Big Sur (2020), iOS Control Center, and Windows 11 Mica. Four key ingredients: (1) semi-transparent background (opacity 10–30%), (2) blur via backdrop-filter 8–16 px, (3) thin white border, (4) soft shadow.

FAQ

backdrop-filter support?

Chrome 76+, Firefox 103+, Safari 9+ (with -webkit-). Universal in 2026.

Why high saturation?

Pure blur dulls colors. `saturate(180%)` restores vibrancy for that glassy look.

Accessibility?

Watch text contrast. Aim for 4.5:1 ratio. White text on dark backgrounds, dark on light.

Free?

Yes.