CSS Shadow Effect

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

There are two types of shadows in CSS:

• Box Shadow
• Text Shadow

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:

Let's see some examples:

.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;
}

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.

Let's see some examples:

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

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.

i. Simple text shadow

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

Output:

ii. Text shadow with different color

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

Output:

iii. Text shadow with different color and blur-radius

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

Output:

iv. Multiple shadow

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

Output: