In this section, we will learn what the box-shadow property is and how to use it in CSS.

Click here to run the example of box-shadow property.

CSS box-shadow Property Definition and Usage

The `box-shadow` property in CSS is used to add shadows around the border of an element to make it attractive and distinguish it from other elements on a page.

CSS box-shadow Property Syntax

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

CSS box-shadow Property Value

• Horizontal-position: the first value that we set for this property is the position of the shadow horizontally. It can be negative or positive values like 4px or 2em etc. Negative values position the shadow towards the left side of the target element and a positive value positions the shadow towards the right side of the box.
• Vertical-position: the second value we set for this property is the position of the shadow vertically. The value can be negative or positive values like 4px or -4px etc. Negative values position the shadow towards the top side of the box and a positive value positions the shadow towards the bottom side of the box.
• Blurriness: Using this value, we can control how blurry or sharp the shadow should be. Sample values: 3px, 10px, 1em, etc.

Note: this value is optional and if you omit it, the shadow will have a very sharp edge.

• Spread of shadow: This value is also optional and if we use a positive value, it will cause the size of the shadow to increase in all directions and using negative value will cause the size to decrease in all directions.
• Color: the last value for this property set the color of the shadow. We can use named-color, RGB, Hex and HSL.

Note: this value is optional and if you omit it, the color of the shadow will be black, which is the default color.

Note: you can also add a multiple type of shadow to this property separating each, using a comma ‘,’.

Example: box-shadow property in CSS

See the Pen box-shadow property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

Inner Shadow CSS

Other than creating shadows around an element, we can create shadows in an element as well.

To do this, we use the “inset” value as the first argument of the `box-shadow` property and then set the rest of arguments.

Check the example below to see this in practice.

Example: inset box shadow

See the Pen inset box shadow by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: CSS shadow effects

See the Pen CSS shadow effects by Omid Dehghan (@enjoytutorials1) on CodePen.