CSS Shadow Effect


CSS Shadow is used to add a shadow effect to the HTML elements.

There are two types of shadows in CSS:


1. CSS box shadow

The box-shadow property is used to create shadow for the HTML elements.

The box-shadow creates a shadow around the element outside the element's border.

Syntax:

box-shadow: h-shadow v-shadow blur spread color inset;

Here is the explanation of the values:

ValueDescription
h-shadowRequired. The horizontal shadow position. Negative values are allowed.
v-shadowRequired. The vertical shadow position. Negative values are allowed.
blurOptional. The blur distance. Negative values are not allowed.
spreadOptional. The shadow size. Negative values are not allowed.
colorOptional. The shadow color. The default is black.
insetOptional. The shadow is inside the border.
CSS box-shadow example
Change the values from options to see the effect.

Let's see some examples:

Example

.simple {
  /* only horizontal and vertical value of shadow */
  box-shadow: 5px 5px;
}

.blur {
  /* blur value 5px */
  box-shadow: 5px 5px 5px;
}

.spread {
  /* spread value 5px */
  box-shadow: 5px 5px 5px 5px;
}

.color {
  /* color value red */
  box-shadow: 5px 5px 5px 5px red;
}

.inset {
  /* inset shadow */
  box-shadow: 5px 5px 5px 5px red inset;
}
Try it

1.1 Multiple box shadow

You can add multiple box shadows to an element by separating the values with a comma.

There is no limit to the number of box shadows you can add to an element.

Just by using box-shadow correctly, you can create some amazing effects.

CSS multiple box-shadow example
Change the values from options to see the effect.

Let's see some examples:

Example

.multiple {
  /* multiple box shadow */
  box-shadow: 5px 5px, 10px 10px red;
}
Try it

2. CSS text shadow

The text-shadow property is used to add a shadow effect to the text.

Using text-shadow property you can add horizontal or vertical shadow with different color and blur radius.

It is similar to box-shadow property but it is used to add shadow to text.

Syntax

The syntax of text-shadow property is given below:

text-shadow: horizontal vertical blur color;

Here, horizontal and vertical are the horizontal and vertical offset of the shadow and blur is the blur radius of the shadow.

CSS text-shadow example
Change the values from options to see the effect.

i. Simple text shadow

Example

p {
    text-shadow: 2px 2px;
}
Try it

Output:

This paragraph has shadow property.


ii. Text shadow with different color

Example

p {
    text-shadow: 2px 2px red;
}
Try it

Output:

This paragraph has blue shadow.


iii. Text shadow with different color and blur-radius

Example

p {
    text-shadow: 2px 2px 5px blue;
}
Try it

Output:

This paragraph has blue shadow with blur-radius 5px.


iv. Multiple shadow

Example

p {
    text-shadow: 2px 2px 5px blue,
                 4px 4px 5px red,
                 -4px -4px 3px #006699;
}
Try it

Output:

This paragraph has multiple shadow.