box-shadow
A shadow around the element's box.
Syntax
box-shadow: x y blur spread color;Values
| Parameter | Type | Description |
|---|---|---|
| x y | length | Horizontal and vertical offset. |
| blur | length | The blur radius. |
| spread | length | Grows or shrinks the shadow. |
| color | color | The color; semi-transparent black looks most natural. |
| inset | keyword | The shadow is drawn inside the element. |
Examples
An outer shadow and an inner line:
<style>
.card { width: 200px; padding: 16px; border-radius: 8px; margin: 16px; }
</style>
<div class="card" style="box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);">A soft shadow</div>
<div class="card" style="box-shadow: inset 0 0 0 2px royalblue;">An inset line</div>Notes
Several shadows are separated by commas — two layered soft shadows look more realistic than one. A shadow follows border-radius and does not affect the layout. For a shadow that follows the shape of a transparent PNG, use filter: drop-shadow().
See also
- text-shadow — A shadow behind the letters of the text.
- border-radius — Rounds the corners of an element.
- filter — Graphic effects on an element: blur, black and white, brightness, shadow by shape.
Related recipes
In the tutorial
- Shadows and gradients — Block and text shadows — box-shadow and text-shadow, linear and radial gradients, color stops.