Codectionary / Developer documentation / CSS

box-shadow

box-shadow adds one or more drop shadows to an element's box, accepting horizontal offset, vertical offset, blur radius, optional spread radius, and color. The inset keyword flips the shadow to render inside the element instead of outside. Multiple shadows can be layered by comma-separating values, useful for realistic elevation effects.

Syntax

box-shadow: offsetX offsetY blur spread color;

Examples

A Basic Drop Shadow

The standard elevated-card look.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}.preview-surface{width:9rem;min-height:5rem;padding:1rem;background:white;color:#172b4d;border-radius:.5rem;margin:1rem}

.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* offsetX offsetY blur color */
}

.elevated {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
  1. Each sample is placed on a neutral surface with enough room to see the shadow.
  2. An inset shadow paints inside the box; an ordinary shadow paints outside without reserving layout space.
  3. Change the blur or offsets and compare shallow, elevated and inset appearances.
HTML used by this example
<div class="preview-row"><div class="card preview-surface">card</div><div class="elevated preview-surface">elevated</div></div>

Inset Shadow and Layered Shadows

An inner shadow, and combining multiple shadows for realistic depth.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}.preview-surface{width:9rem;min-height:5rem;padding:1rem;background:white;color:#172b4d;border-radius:.5rem;margin:1rem}

.pressed {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.layered {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07),
    0 8px 16px rgba(0, 0, 0, 0.07);
}
  1. Each sample is placed on a neutral surface with enough room to see the shadow.
  2. An inset shadow paints inside the box; an ordinary shadow paints outside without reserving layout space.
  3. Change the blur or offsets and compare shallow, elevated and inset appearances.
HTML used by this example
<div class="preview-row"><div class="pressed preview-surface">pressed</div><div class="layered preview-surface">layered</div></div>

Parameters and values

  • offsetX / offsetY (length): Horizontal and vertical shadow position
  • blur (length): How soft/spread out the shadow edge is
  • spread (length): Expands or shrinks the shadow size before blurring
  • inset (keyword): Renders the shadow inside the element instead of outside

Best practices

  • Use low-opacity black (rgba(0,0,0,0.1) or similar) rather than solid gray for more natural-looking shadows
  • Layer multiple subtle shadows rather than one large one for a more realistic, soft elevation effect (a common design-system pattern)
  • Use inset shadows for pressed/active button states or input field focus effects
  • Keep shadow intensity proportional to elevation - small, subtle shadows for slightly-raised cards, larger and softer ones for modals and popovers

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading