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:

noneThis is the default value. No box shadow is added to the element.
h-offsetSpecifies the length of horizontal shadow. A positive value adds a shadow to the right side of the box and a negative value adds a shadow to the left side of the box.
v-offsetSpecifies the length of vertical shadow. A positive value adds a shadow to the top side of the box and a negative value adds a shadow to the bottom side of the box.
blur-radiusAdds a blur effect to the shadow. The higher the blur radius, the higher the blur effect.
spread-radiusChanges the size of the box-shadow. A positive value increases the size of the shadow and a negative value decreases the size of the shadow.
colorSpecifies the color of the box shadow in any valid CSS color format such as ‘color name’, ‘RGB’, ‘HEX’, ‘HSL’, etc.
insetSpecifies an inner shadow.
initialSets the box-shadow property to its default value(none).
inheritInherits the box-shadow property from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.boxShadow = “6px 8x 5px red”;

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment