box-shadow
Adds one or more shadows to an element's box. Use `inset` to draw a shadow inside the box.
4,198 effects in the catalog use this property.
Syntax
box-shadow: [inset] <x> <y> <blur> <spread> <color> [, ...];Watch out
A `box-shadow` focus ring follows `border-radius`, but it can disappear in Windows high-contrast mode. Pair it with a visible `outline` for accessibility.
Common values
0 12px 30px rgba(0,0,0,.24)- Soft elevation shadow
inset 0 1px rgba(255,255,255,.2)- Inset highlight along the top edge
0 0 0 3px rgba(59,130,246,.4)- Focus ring with zero blur and positive spread
Effects using box-shadow
These are working effects from the catalog. Open a tile to inspect the full source.