How to Create Smooth Box Shadows in CSS

If you've ever added a box-shadow to an element and felt like it looked a bit... off, you're not alone. The default approach of using a single shadow layer produces a harsh, unrealistic result. The fix is simple: layer multiple shadows with increasing blur and decreasing opacity. This is the technique used by Material Design, Apple's Human Interface Guidelines, and virtually every polished design system.

The Problem with Single-Layer Shadows

A single box shadow creates a uniform blob of colour behind your element. In the real world, shadows don't work this way — objects cast a sharp, dark shadow close to the surface and a soft, diffused shadow further away. When you use just one box-shadow, you get a result that your brain reads as artificial even if you can't articulate why.

The difference is subtle but significant. The left card uses one shadow with a moderate blur. The right card layers four shadows from tight to wide. Your eye reads the right one as physically elevated above the page.

The Layered Shadow Technique

The principle is straightforward: start with a small, tight shadow close to the element, then add progressively larger, softer shadows with lower opacity. Each layer serves a purpose — the tight shadow grounds the element, while the wide shadows create ambient depth.

Notice the pattern: each layer roughly doubles the blur radius of the previous one, while the Y offset increases to push the shadow downward. The opacity stays low across all layers — typically between 0.03 and 0.12 — because the cumulative effect of four or five layers adds up quickly.

Shadow Elevation Levels

Most design systems define 3–5 shadow elevation levels that correspond to different UI states. Here's a practical set you can use directly:

Level 1 — Subtle (cards, containers)

Level 2 — Medium (hover states, dropdowns)

Level 3 — High (modals, popovers)

Coloured Shadows

Black or grey shadows are the safe default, but coloured shadows can add polish and personality. The trick is to use a darkened, desaturated version of the element's background colour as the shadow colour. This creates a subtle glow effect that feels more integrated with the design.

This technique works especially well for buttons and call-to-action elements. The shadow reinforces the button's colour instead of creating a disconnected grey blob beneath it.

Performance Tips

Don't animate box-shadow directly. Changing the shadow value forces the browser to repaint, which is expensive. Instead, use a pseudo-element with the target shadow applied, and transition its opacity. The shadow renders once and the opacity change is GPU-accelerated.

This pattern gives you silky smooth hover transitions without jank, even on mobile devices.