What's a CSS box shadow?
Using the box-shadow property, you can add a CSS box shadow effect for a selected element:
CSS shadow syntax
The syntax for box-shadow is as follows:
box-shadow: h-shadow v-shadow blur spread color;
Property values
| Value | Description | |
|---|---|---|
| none | Default | No CSS box shadow is displayed. |
| h‑shadow | Required | The horizontal offset. Use a positive value for the right side of the box and a negative value for the left. |
| v‑shadow | Required | The vertical offset. Use a positive value for the area below the box and a negative value for the area over the box. |
| blur | Required | The level of blur. 0 represents a sharp CSS box shadow. Higher number means more blur in a bigger area. |
| spread | Optional | The size of the CSS box shadow. Use a positive value for bigger size and a negative value for smaller size. |
| color | Optional | The color of the CSS box shadow. Black by default. Specify a custom one using color names, RGB, RGBA, HEX, HSL or HSLA values. |
Tip: you can use the
insetkeyword to change the outset CSS shadow to an inner shadow.
Browser support
Chrome
10+
Edge
12+
Firefox
4+
IE
9+
Opera
10.5+
Safari
5.1+
Mobile browser support
Chrome
18+
Firefox
4+
Opera
All
Safari
5+