CSS Box Shadow Examples

Basic Drop Shadow

box-shadow: 0 0 10px;

Inner Shadow

box-shadow: inset 0 0 10px;

Offset Drop Shadow (Bottom Right)

box-shadow: 5px 5px 10px;

Offset Drop Shadow (Top Left)

box-shadow: -5px -5px 10px;

Inset Value

box-shadow: inset 0 0 5px 5px olive;

No Inset Value

box-shadow: 0 0 5px 5px olive;

Horizontal Offset Value

box-shadow: 20px 10px;

Vertical Offset Value

box-shadow: 10px -20px;

Blur Radius Value

box-shadow: 5px 5px 20px;

Spread Distance Value

box-shadow: 0 0 10px 5px;

Negative Spread Distance Value

box-shadow: 0 10px 10px -5px;

Default Color Value

color: red;
box-shadow: 0 0 10px 5px;

With Color Value

color: red;
box-shadow: 0 0 10px 5px blue;

Multiple Box Shadows

box-shadow: -5px -5px 30px 5px red, 5px 5px 30px 5px blue;