What Is CSS Box Shadow? A Complete Guide

What Is CSS Box Shadow?

The CSS box-shadow property adds shadow effects around an element's frame. It can create the illusion of depth, separate elements from backgrounds, and add visual hierarchy — all without images.

Syntax

box-shadow: offset-x offset-y blur-radius spread-radius color;

Multiple shadows can be layered with a comma:

box-shadow: shadow1, shadow2, shadow3;

Parameters Explained

Parameter	Description	Default
`offset-x`	Horizontal shadow position. Positive = right, negative = left	Required
`offset-y`	Vertical shadow position. Positive = down, negative = up	Required
`blur-radius`	How blurry the shadow is. 0 = sharp edge	0
`spread-radius`	Expands or contracts the shadow. Positive = larger, negative = smaller	0
`color`	Shadow colour (any CSS colour value)	`currentColor`
`inset`	Makes the shadow appear inside the element	—

Examples

Subtle card shadow (most common)

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

Lifted card (hover state)

box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);

Sharp drop shadow (retro / neumorphic)

box-shadow: 4px 4px 0 0 #000;

Inset (pressed button effect)

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);

Coloured glow

box-shadow: 0 0 16px 4px rgba(99, 102, 241, 0.5);

Layered multiple shadows (depth with edge)

box-shadow:
  0 1px 1px rgba(0,0,0,0.08),
  0 2px 4px rgba(0,0,0,0.08),
  0 4px 8px rgba(0,0,0,0.08);

Stacking three progressively larger shadows with the same opacity creates a more natural-looking depth than a single large shadow.

Inset Shadows

Add inset before the offsets to cast the shadow inside the element:

/* Pressed / recessed look */
box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);

/* Top highlight for 3D effect */
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);

Performance Considerations

box-shadow is rendered by the browser's compositing layer. It triggers a repaint when it changes (e.g., on hover). For smooth animations:

Prefer filter: drop-shadow() for irregular shapes (SVG, transparent PNGs).
Use will-change: box-shadow sparingly — it promotes the element to its own GPU layer.
Animate opacity or transform instead when possible, and switch between a box-shadow using opacity changes on a ::after pseudo-element (the "magic" shadow trick).

box-shadow vs filter: drop-shadow()

Feature	`box-shadow`	`filter: drop-shadow()`
Respects border-radius	Yes	Yes (also wraps irregular shapes)
Inset	Yes	No
Performance	Similar	Similar
Works on SVG/PNG	No (box only)	Yes
Multiple values	Yes (comma)	Use multiple `filter` values

Use the Box Shadow Generator to build and preview box-shadow values visually and copy the CSS.

What Is CSS Box Shadow? A Complete Guide