Text and Box Shadows

Text-Shadow

Creating shadows around text is fairly simple in CSS. The most difficult part is remembering the sequence of values: to right, down, blur, color. Negative values for the first two items will move the shadow left and up.

The keyword none will remove text-shadow as needed.

CSS

.text1 {text-shadow: 5px 5px 5px red;}

Text Shadow Example

Multiple text shadows can easily be added for interesting effects. Simply include two or more sets of values, separated by a comma.

CSS

.text2 {text-shadow: 5px 5px 5px red, -5px -5px 5px blue;

Text Shadow Example

Box-Shadow

A box shadow simply creates a shadow around an entire element. The basic syntax is the same as used with text-shadow, although there are a few variations.

Basic Box-Shadow

CSS

.box {border: thin solid grey; box-shadow: 10px 10px 5px grey;}

Box shadow demo

Inset Box-Shadow

In this case, the shadow will be inside the box.

CSS

.box2 {border: thin solid grey; box-shadow: inset 10px 10px 5px grey;}

Box shadow demo

Multiple Box-Shadows

Use the same approach used to create multiple text-shadows: separate sets of values with a comma.

CSS

.box3 {box-shadow: -10px -10px 5px grey, 10px 10px 5px black;}

Multiple box-shadows are often used in neomorphism.

Box shadow demo