Glassmorphism, Gradients and Shadows: Modern CSS Effects Done Right

The anatomy of believable glass

Glassmorphism is four properties working together: a translucent background (rgba or color with alpha), backdrop-filter: blur() to diffuse what sits behind, a 1px semi-transparent border to catch light on the edge, and a soft shadow to lift the pane off the page. Miss any one and the effect reads as "gray box" rather than glass.

.glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

The saturate() term is the professional touch: blurring desaturates whatever is behind the pane, and boosting saturation back restores the color richness that makes the glass feel physical.

What backdrop-filter costs

Backdrop blur is one of the most expensive effects a browser can paint: every frame, the compositor re-blurs the pixels behind the element. One glass navbar is fine; twelve glass cards over an animated background will drop frames on mid-range phones. Keep blurred surfaces few, small, and ideally over static content — and always provide a solid-color fallback for browsers where the property is disabled.

Layered shadows beat single shadows

Real shadows have two components: a tight dark contact shadow and a wide soft ambient one. A single box-shadow can only approximate one of them, which is why single-shadow cards look flat. Stacking two or three shadows with increasing blur and decreasing opacity produces depth that reads as physical.

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.24),
    0 8px 24px rgba(0, 0, 0, 0.16),
    0 24px 64px rgba(0, 0, 0, 0.08);
}

Gradients without the gray dead zone

A gradient from blue to yellow interpolated in sRGB passes through desaturated gray in the middle. Interpolating in OKLCH keeps perceived lightness and chroma smooth across the whole ramp: linear-gradient(in oklch, #3b82f6, #eab308). Modern browsers support interpolation color spaces natively, and it is the single easiest upgrade to any two-color gradient.

The accessibility floor

Translucent surfaces make contrast unpredictable: text that passes WCAG over a dark region of the backdrop can fail over a light one. Test text over the *lightest* thing that can scroll behind it, keep body text on glass at 4.5:1 minimum, and respect prefers-reduced-transparency where the platform exposes it. Decorative blur is never worth unreadable text.