How the box-shadow property works
The CSS box-shadow property paints one or more shadows around an element's box. A single shadow is written as up to five parts: a horizontal offset, a vertical offset, an optional blur radius, an optional spread radius and a color. Positive offsets push the shadow to the right and downwards; negative offsets move it left and up.
The blur radius controls how soft the edge is — 0 gives a hard, sharp shadow while larger values fade it out. The spread radius grows the shadow (positive) or shrinks it (negative) before the blur is applied. Adding the inset keyword flips the shadow to the inside of the box. This generator combines your chosen color and opacity into an rgba() value so the shadow blends naturally over any background.
horizontal 0, vertical 4px, blur 12px, spread 0 with black at 0.15 opacity produce box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15); — a soft card shadow sitting just below the element.Reference note: to layer depth, comma-separate several shadows in one declaration; the first listed shadow is painted on top.
Preset shadows
| Preset | CSS |
|---|---|
| Subtle | box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12); |
| Card | box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15); |
| Floating | box-shadow: 0 16px 40px 0 rgba(0,0,0,0.25); |
Frequently asked questions
- How does CSS box-shadow work?
- The
box-shadowproperty paints one or more shadows around an element's box, each defined by a horizontal offset, a vertical offset, an optional blur radius, an optional spread radius and a color. Positive offsets move the shadow right and down. - What do the box-shadow values mean (offset, blur, spread)?
- The first two values are the horizontal and vertical offsets in pixels. The third is the blur radius — bigger numbers soften the edge. The fourth is the spread radius, which grows or shrinks the shadow. The last value is the color.
- How do I make a soft / subtle shadow?
- Use small offsets, a moderate blur and a low-opacity color, such as
0 1px 3px rgba(0,0,0,0.12). Keep the spread at 0 and the opacity low to avoid a heavy, hard-edged look. - What is an inset shadow?
- Adding the
insetkeyword draws the shadow inside the box instead of outside, giving a pressed or carved-in look that suits inputs, wells and pressed buttons. - How do I add multiple shadows?
- Comma-separate several shadow definitions in one declaration, e.g.
box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15). The first shadow in the list is painted on top. - How do I copy the box-shadow CSS?
- Adjust the sliders until the preview looks right, then click the Copy button next to the generated
box-shadowline to place the full declaration on your clipboard.