CSS Reference

CSS box-shadow

Complete guide to the CSS box-shadow property — syntax, multiple layers, inset shadows, spread radius, and performance tips.

Overview

The `box-shadow` property adds one or more shadow effects to an element's frame. Each shadow is described by horizontal and vertical offsets, optional blur and spread radii, color, and an optional `inset` keyword. Multiple shadows are comma-separated and drawn in order (first = topmost).

Syntax

box-shadow: [inset?] <offset-x> <offset-y> [<blur-radius>] [<spread-radius>] [<color>]

Values

offset-x

Horizontal offset. Positive = right, negative = left.

offset-y

Vertical offset. Positive = down, negative = up.

blur-radius

Optional. Larger values = softer, more diffuse shadow. Default: 0 (sharp edge).

spread-radius

Optional. Positive = expand shadow, negative = shrink. Default: 0.

color

Shadow color. Use `rgba()` or `hsla()` for transparency. Default: currentColor.

inset

Optional keyword. Moves the shadow inside the element border.

none

Removes all shadows. Useful for overriding inherited shadows.

Browser Support

Supported in all modern browsers without prefix. Works in IE9+ (without spread-radius in IE9).

Try it visually

Use our visual box-shadow generator to create and preview CSS code in real-time.

Open CSS box-shadow Tool

Frequently Asked Questions

Use a small y-offset (2-4px), moderate blur (8-16px), no spread, and a semi-transparent black: `box-shadow: 0 2px 8px rgba(0,0,0,0.1)`.

No. box-shadow is purely visual — it does not affect the element's size, position, or the layout of surrounding elements.

Yes. Separate each shadow with a comma: `box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)`. The first shadow is rendered on top.