← Back to blog
·3 min read

How to Create Perfect Box Shadows in CSS

CSSBox ShadowUI Design

Shadows make or break a UI. Flat designs with no depth feel lifeless, while heavy shadows look dated. Here's how to get them right.

The Anatomy of box-shadow

css
box-shadow: [inset] <offset-x> <offset-y> <blur> <spread> <color>;
  • offset-x / offset-y: Direction of the shadow
  • blur: Softness (higher = softer)
  • spread: Size expansion (can be negative)
  • color: Usually a semi-transparent black or brand color

Technique 1: Layered Shadows for Realism

The secret to realistic shadows? Multiple layers with different properties:

css
box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.07),
  0 2px 4px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.07),
  0 8px 16px rgba(0, 0, 0, 0.07);

Each layer doubles in size, mimicking how real light creates soft, graduated shadows.

Technique 2: Colored Shadows

Instead of black/gray, use a darker shade of your element's background:

css
/* For a purple card */
box-shadow: 0 8px 30px rgba(99, 102, 241, 0.3);

This creates a "glow" effect that feels more natural and branded.

Technique 3: Inset Shadows for Depth

Inset shadows make elements look pressed or carved:

css
box-shadow:
  inset 0 2px 4px rgba(0, 0, 0, 0.2),
  inset 0 -1px 2px rgba(255, 255, 255, 0.05);

Combine a dark inset shadow from above with a subtle light one from below for a neumorphic feel.

Performance Tip

Shadows trigger repaints. For animated elements, use filter: drop-shadow() or promote the element to its own layer with will-change: box-shadow to avoid layout thrashing.

Design your perfect shadow with our Box Shadow Generator — it supports multiple layers and inset shadows with live preview.