CSS box-shadow Property

CSS box-shadow property is used to add shadow effects around an element.

To define the box shadow, we have to pass at least two values. Here,

• The first value defines the horizontal offset
• The second value defines the vertical offset

Example:

div{
  box-shadow: 6px 8px;
}

Adding a blur effect to the box shadow

We can also specify the third parameter to the box-shadow property. This third parameter defines the blur radius. The higher the value of blur radius, the higher the blur effect. This value is optional. Refer to the example below:

Example:

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

Adding a spread radius to the box shadow

The fourth parameter in the box-shadow property defines the spread radius. A positive value increases the size of the shadow and a negative value decreases the size of the shadow. This is an optional parameter. Refer to the example below:

Example:

div{
  box-shadow: 6px 8px 5px 6px;
} 

Adding a color to the box shadow

The fifth and the last value in the box-shadow property specifies the color of the box shadow.

By default, the color of the box shadow is the same as the text color of the element. The shadow color can be specified in any valid CSS color formats such as ‘color name’, ‘RGB’, ‘HEX’, ‘HSL’, etc. This is also an optional value. Refer to the example below;

Example:

div{
  box-shadow: 6px 8px 5px red;
}

Adding multiple layers of the box shadow

It is also possible to add multiple layers of the box shadow. These layers must be comma-separated. Refer to the example below:

Example:

div{
  box-shadow: 6px 8px 5px red, 6px -8px 5px green, -4px -5px 6px blue;
}

CSS Syntax

The box-shadow property has the below syntax:

box-shadow: none|h-offset v-offset blur-radius spread-radius color|inset|initial|inherit;

Property Values

The box-shadow property accepts the following values:

General Info