Box Shadow Techniques

Creating a Inner Shadow

The "inset" keyword allows to draw an inner shadow in the box. To show an insert shadow, just add the inset keyword.


box-shadow: inset 10px 10px 5px #888888;


Layering Multiple Shadows

You can define as many shadows for the same box as you want by writing all of them comma-separated in the same rule.

In the example below, tow inner shadows have been created by separating each shadow with a comma.


box-shadow: inset 10px 10px 5px #888888, inset -10px -10px 5px #888888;


In case we specify more than one value, the one which comes last will be positioned at the back of all shadows.

box-shadow: 0 0 10px 4px #FF6347, 0 0 10px 30px #FFDAB9, 30px 0 20px 30px #B0E0E6;