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.

Easing: where motion feels cheap or expensive

The same 300 ms transition reads as "snappy" or "sluggish" depending entirely on its easing curve. Linear motion feels mechanical because nothing in the physical world moves at constant speed. ease-out (fast start, slow landing) is right for elements entering or responding to a click — the interface reacts immediately, then settles. ease-in is for elements leaving. ease-in-out suits movement between two resting positions. Beyond the keywords, a custom cubic-bezier() buys character: a slight overshoot (cubic-bezier(0.34, 1.56, 0.64, 1)) feels playful; a long deceleration (cubic-bezier(0.16, 1, 0.3, 1)) feels premium.

• Durations: 150–250 ms for hover and small state changes, 300–400 ms for panels and modals, rarely over 500 ms for anything a user waits on.
• Animate only transform and opacity where possible — they run on the compositor and stay smooth; animating width, top or box-shadow triggers layout or paint every frame.
• Respect prefers-reduced-motion: swap large movements for simple fades, and never make motion the only cue that something happened.

Layering depth without heavy effects

Glass and blur are expensive; depth does not have to be. Three cheap techniques carry most of the "premium dark UI" feeling: a 1px border at 8–12% white opacity on cards (it catches light like an edge), a background that is a slightly different tone from the page rather than a different color, and a faint radial glow behind a focal element using a large blurred radial-gradient (paint once, no per-frame cost). Combine those with one well-placed backdrop blur on the navigation bar and the interface reads as layered and modern at a fraction of the GPU cost of blurring everything.

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.