Skip to content
WebTricks

Glassmorphism card

A frosted-glass card using backdrop-filter blur with a subtle border and highlight.

  • card
  • glass
  • backdrop-filter
  • blur
  • effect
Blur12px
Saturation140%
Corner radius16px
Glass tint (rgba)rgba(255, 255, 255, 0.12)
HTML 
<div class="glass"><h3>Frosted glass</h3><p>Drag the blur — the stripes behind blur through the glass.</p></div>
CSS 
:root {
    --blur: 12px;
    --sat: 140%;
    --radius: 16px;
    --tint: rgba(255, 255, 255, 0.12);
}

.glass {
    max-width: 280px;
    padding: 24px;
    border-radius: var(--radius);
    color: #fff;

    background: var(--tint);
    backdrop-filter: blur(var(--blur)) saturate(var(--sat));
    -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));

    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.glass h3 { margin: 0 0 8px; }
.glass p  { margin: 0; opacity: 0.9; }

How it works

The frosted look needs a busy background behind the element — the blur samples whatever is underneath, so glass over a flat color shows nothing. The demo deliberately sits on sharp diagonal stripes so the blur is obvious; try dragging the Blur control to 0 and back.

  • backdrop-filter: blur() saturate() blurs and boosts the backdrop. Always include the -webkit- prefix for Safari.
  • A semi-transparent white background (--tint) tints the glass.
  • The inset box-shadow adds a top highlight; the outer shadow lifts the card.

Performance note: backdrop-filter is GPU-cheap for a few elements but can be costly across many large, scrolling surfaces at once.