Introduction⌗

The CSS property box-shadow is used to set a shadow on an element. This can be to add emphasis on an element or to make it stand out from other elements in the document.

Syntax⌗

The box-shadow CSS property has the following syntax:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

Horizontal offset⌗

This is required. When the value is positive, the shadow will appear on the right side of the element. When the value is negative, the shadow will appear on the left side of the element.

Example⌗ 

box-shadow: 10px 5px 5px red;
Figure 1
Fig 1: positive value horizontal offset.
box-shadow: -10px 5px 5px red;
Figure 2
Fig 2: negative value horizontal offset.

Vertical offset⌗

This is required. When the value is positive, the shadow will appear at the bottom of the element. When it is negative, the shadow will appear at the top of the element.

Example⌗ 

box-shadow: 10px 5px 5px red;
Figure 3
Fig 3: positive value vertical offset.
Figure 4
Fig 4: negative value vertical offset.

Blur Radius⌗

This is required. It determines how visible (blurred) you want the shadow to be. A blur radius of 0 will be sharp. The higher the value of the blur then the blurrier it becomes. When you set a blur radius of 5px and a horizontal offset of 5px then you end up with 10px of total shadow.

Example⌗ 

box-shadow: 10px 5px 0px red;
Figure 5
Fig 5: 0px blur radius.

You can see from Fig 4 the total shadow of 10px when you set a blur radius of 5px and a horizontal offset of 5px.

Spread Radius⌗

This is optional. It determines the size of the shadow. A positive value increases the shadow and a negative one decreases it. The default value is 0.

box-shadow: 10px 5px 5px 10px red;
Figure 6
Fig 6: a positive spread radius.

Color⌗

This is required. It takes any color value, like hex, named, rgba or hsla.

Figure 7
Fig 7: a blue-colored radius.

Inset⌗

This is optional. It is used to set the shadow inside the element.

Example⌗ 

box-shadow: inset 10px 5px 5px red;
Figure 8
Fig 8: box-shadow with inset.

Conclusion⌗

This article introduces you to the basics of using a box-shadow and explains what the options of the box-shadow are available and how to use them. You can now go further and create smoother box shadows or multiple box shadows by manipulating these basics.

You can find the working code used in this article here1.

For further reading:

  • Box-shadow: MDN Web Docs2.
  • Box-shadow: CSS Tricks3.

  1. https://stackblitz.com/edit/web-platform-8ejt88?file=index.html ↩︎

  2. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow ↩︎

  3. https://css-tricks.com/almanac/properties/b/box-shadow/ ↩︎