CSS Box Shadow Use Cases and Examples

Follow us on LinkedIn for our latest data and tips!

, ,

CSS Box Shadow Use Cases and Examples

The box-shadow property allows developers to implement multiple drop shadows, either outer or inner placed on box elements. The different attributes they can change are size,color, offset and blur. There is an increase of support through different browsers that include Mozilla (Firefox) and Webkit (Safari & Chrome). Mozilla and Webkit no longer require their implementation of using the prefixes of -moz- and -webkit-, except for in rare special cases.

The box-shadow accepts a shadow list separated by commas, all of these defined by 2-4 length values. These specify the horizontal and vertical offset, on top of the optional blur distance and spread distance of the shadow.


The syntax is pretty straight forward. The only problems you may run into is having the shadows show up on all different kinds of browsers. You’ll no longer need to use a set of prefixes to show up on Mozilla and Webkit browsers. The following code is the basis for a box shadow.

#shadowBox {
box-shadow: 10px 10px 5px #777;

In the past you’d add the following for other browsers by adding the prefixes for Webkit, and Mozilla. The following code was neccessary to show up on other browsers.

#shadowBox {
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;

Box Shadow Use Properties

The following list is in the order of operations that a box shadow will be implemented in. Each of these are important to take note of to change each individual attribute of the element.

Horizontal Shadow Offset: A positive offset will render the shadow to the right of the box, while a negative one will place the shadow to the left of the box.

Vertical Shadow Offset: A negative offset will put the shadow above the box, while a positive one puts the shadow below the box.

Optional Blur Radius: This is an optional attribute and if set to 0 the shadow will be sharp, if the number gets higher the blur will follow and increase.

Optional Spread Radius: Another optional attribute where positive values make the shadow larger and negative values will decrease the size. The default is 0, same as blur.

Creating Basic Outer Shadows

Our first look will be at the basis of creating a regular outer shadow on a simple box. To account for the variance in different browsers, we’ll add similar lines of codes with different prefixes. Shadows are essentially drawn outside of different elements. Among this definition we find that an outer shadow box casts a shadow as if the border of the element was hazy and non-transparent.

Below is an example of all of the properties in action, including the optional ones. You can see the basis of the process in action. By changing the color it compliments or can blend in with the background already set in the HTML.

box-shadow: 0 30px 10px -8px #777;

Try out this code by just changing up some of the values and watch how drastically the shadows can change. By just switching up a couple different numbers you can bring the shadow from the top to the bottom or left to right. There are many possibilites here to understand the full aspect of Shadow use cases.

See the Pen CSS Box Shadow Example by Mike Colagrossi (@SantinoMPC) on CodePen.