4 types of shade

Simple shadow

In CSS 3, the box-shadow property has appeared, which allows HTML elements to create a shadow effect.

.shadow {
    box-shadow: 5px 5px #333;
}

Example on JSFiddle

box-shadow

Blurred shadow

Through the third parameter you can specify the blur of the shadow.

.shadow {
    box-shadow: 5px 5px 10px #333;
}

Example on JSFiddle

box-shadow

Multiple shadows

You can create multiple shadows by specifying several parameters separated by commas.

.shadow {
    box-shadow: 4px 4px 8px red,
                8px 8px 8px green,
                12px 12px 8px blue;
}

Example on JSFiddle

box-shadow

Inner shadow

You can set a shadow inside the object using the inset parameter.

.shadow {
    box-shadow: inset 3px 3px 8px #333;
}

Example on JSFiddle

box-shadow

The box-shadow property is supported by all modern browsers. Internet Explorer is supported from version 9.