effects
box-shadow
Adds one or more shadows around an element's box. Multiple comma-separated shadows layer to create depth, glow, or inset effects.
box-shadow: none | [inset] <x> <y> <blur> [<spread>] <color> [, ...]Common values
| Value | Effect |
|---|---|
| none | Removes any shadow |
| 0 1px 2px rgb(0 0 0 / .1) | Subtle UI drop shadow |
| 0 10px 30px rgb(0 0 0 / .2) | Elevated card shadow |
| inset 0 2px 4px rgb(0 0 0 / .1) | Inner shadow, often for pressed states |
| 0 0 0 3px rgb(59 130 246 / .5) | Focus ring via a solid spread shadow |
Examples
.card { box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .08); }Layered shadow for realistic depth
.input:focus { outline: none; box-shadow: 0 0 0 3px rgb(59 130 246 / .5); }Custom accessible focus ring
.pressed { box-shadow: inset 0 2px 4px rgb(0 0 0 / .15); }Inner shadow for a pressed button
Gotcha
Shadows are painted outside the border box but do not affect layout; watch for overlap with siblings.
Related properties
border-radius
Rounds the corners of an element's border box. Values can be lengths or percentages, and the slash syntax lets you set different horizontal and vertical radii for elliptical corners.
opacity
Sets the transparency of an entire element, including its background, borders, and children. Values range from 0 (fully transparent) to 1 (fully opaque).
transition
Shorthand that animates changes to specified CSS properties over a duration. It is the simplest way to add polish to hover, focus, and state changes.
background
Shorthand for all background-* properties, letting you set color, image, position, size, and repeat in one declaration. Resets any background properties you do not specify to their initial values.