CSS Shadow Effects

In CSS There are two types of shadows:

CSS text-shadow

CSS text-shadow is using for applying shadow to text.

h1 {
text-shadow: 2px 2px;
}

Run Example

Using a color in the shadow:

h1 {
text-shadow: 2px 2px blue;
}

Run Example

Using a blur effect to the shadow:

h1 {
text-shadow: 2px 2px 6px blue;
}

Run Example

To use multiple shadows, you simply add a comma between two (or more) sets of values:

h1 {
text-shadow: 0 0 3px red, 0 0 7px green;
}

Run Example

CSS box-shadow is using for applying shadow to the elements.

div {
box-shadow: 10px 10px;
}

Run Example

Using a color to the shadow:

div {
box-shadow: 10px 10px black;
}

Run Example

Using a blur effect to the shadow:

div {
box-shadow: 10px 10px 5px black;
}

Run Example