Design & CSS

Glassmorphism Generator

Build glassmorphism CSS visually with backdrop-blur + saturation + bg tint + border + shadow controls. Pick a preset (iOS, Apple Card, Discord modal…), preview against multiple backdrops, then copy CSS, Tailwind, React inline, SCSS, or JSON.

backdrop-filter requires Chrome 76+, Firefox 103+, Safari 9+ (with -webkit- prefix).

Live preview

Swap the backdrop between a gradient, a photo, a grid pattern, or a solid color — the glass card recomputes instantly.

AaBb 123

Glass card

Width

Height

Preset gallery

iOS, Apple Card, Windows 11 Mica, Discord, frost levels, and tinted glasses.

Controls

Tune the backdrop filter, background tint, border, and drop shadow with live feedback.

Background blur

Background opacity

Saturation

Brightness

Background color

BorderGradient border

Width

Radius

Opacity

Drop shadowInner highlight (iOS)

Offset X

Offset Y

Blur

Opacity

Code output

CSS block with -webkit- fallback, Tailwind utility classes, React inline style, SCSS mixin, or JSON.

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}