A Close Look at CSS Box Shadow

The CSS box-shadow property can be used to give block elements a drop shadow or an inner shadow. Let’s take a close look at this CSS property.

Examples

Below are three different examples of applying the CSS box-shadow property on a div.

Example 1: Simple Drop Shadow

Here’s how you could give a div a subtle gray drop shadow.

box-shadow: 0 0 10px gray;

Example 2: Inner Shadow

An inner shadow can be rendered using the inset property value.

box-shadow: inset 0 0 10px;

Example 3: Offset Drop Shadow

In this example, the box shadow is cast with a bias towards the bottom-right side of the box by using a horizontal offset and vertical offset of 5px.

box-shadow: 5px 5px 10px;

What if you wanted to have the shadow at the top-left portion of the box instead? We can do so using negative values for the horizontal offset and vertical offset. In the following example, the horizontal offset and vertical offset is set to -5px.

box-shadow: -5px -5px 10px;

Now that you’ve seen a few examples of CSS box-shadow in action, let’s dig a little deeper.

Syntax

The general syntax of the box-shadow property is as follows:

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

CSS Property Values

The CSS box-shadow property has six possible property values:

1. inset


2. horizontal offset


3. vertical offset


4. blur radius


5. spread distance


6. color

Only two property values are required: the horizontal offset and the vertical offset.

Four property values, the horizontal offset, vertical offset, blur radius, and spread distance, must use a CSS length unit (e.g. px, em, %, etc.)

The color value must be a CSS color unit such as a hex value (e.g. #000000).

Property Value Summary

Property value	Required?	Unit	Default value if not specified
inset	No	keyword	If inset is not specified, the box shadow will be outside of the HTML element.
horizontal offset	Yes	length	No default value. It must be specified.
vertical offset	Yes	length	No default value. It must be specified.
blur radius	No	length	0
spread distance	No	length	0
color	No	color	Equal to the color property of the HTML element/s that the box shadow is being applied to.

inset

If the inset keyword property value is present, the box shadow will be placed inside the HTML element.

box-shadow: inset 0 0 5px 5px olive;

As a comparative reference, here’s the same box shadow without the inset property:

box-shadow: 0 0 5px 5px olive;

horizontal offset

The horizontal offset value controls the x-axis position of the box shadow. A positive value will shift the box shadow to the right, while a negative value will shift it to the left.

In the following example, the horizontal offset is set to 20px, or double the value of the vertical offset (which is set to 10px), so the shadow is two times wider horizontally.

box-shadow: 20px 10px;

vertical offset

The vertical offset controls the box shadow’s position on the y-axis. A positive value will move it down while a negative value will move it up.

In the following example, the vertical offset has a length of -20px, or double the length of the horizontal offset (10px), so the size of the shadow is twice as big on the vertical axis. Also, since the value is negative, the location of the shadow is offset towards the top of the box.

box-shadow: 10px -20px;

blur radius

The blur radius property value affects the blurriness/sharpness of the box shadow.

The blur radius is optional. If you don’t specify it, it will default to 0. Additionally, it can’t have a negative value, unlike horizontal offset and vertical offset.

If the blur radius is 0, the box shadow will be sharp and its color will be solid. As you increase the value, it will become blurrier and more opaque.

In the example below, the blur radius value is set to 20px, thus the blurriness is quite pronounced.

box-shadow: 5px 5px 20px;

spread distance

The spread distance makes the box shadow larger or smaller in all directions. If it has a positive value, the box shadow will grow in size on all sides. If it has a negative value, the box shadow will contract on all sides.

Notice how, because of the positive spread distance (10px), there’s a 10px drop shadow on all sides of the box because there is no horizontal offset and vertical offset:

box-shadow: 0 0 10px 5px;

When the spread distance is negative, the shadow shrinks on all sides. In the following example, the shadow is smaller than the box’s width because of its negative spread distance and the absence of a horizontal offset:

box-shadow: 0 10px 10px -5px;

color

As you can already tell by its name, the color value sets the box shadow’s color. It can be specified using any CSS color unit. Specifying a color value is optional.

By default — in other words, if you don’t explicitly state a color value for your box shadow — the shadow’s color will be equal to the color value of the HTML element the box-shadow property is being applied to. For instance, if you have a div that has the color of red, the box shadow’s color will also be red:

color: red;
box-shadow: 0 0 10px 5px;

If you want a different shadow color, then you’ll need to specify it in the box-shadow property value declaration. Below you can see that even though the foreground color of the div is still red, the box shadow color is blue.

color: red;
box-shadow: 0 0 10px 5px blue;

Multiple Box Shadows

This is where you can get really creative with this CSS property: You can apply more than one box shadow on an element.

The syntax is as follows:

box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];

In other words, you can have multiple box shadows by separating each property value group with commas (,).

In the following example, there are two box shadows: A red one at the top-left side of the box, and a blue one at the bottom-right side.

box-shadow: -5px -5px 30px 5px red,
 5px 5px 30px 5px blue;

Browser Support

The CSS box-shadow property has good browser support. Using Internet Explorer as the least common denominator, the property has been supported since IE 9 (which was released in 2011).

CSS Box Shadow Examples

You can see a live demo of all the box shadow examples used in this article by clicking the button below.

View Demo

Related Content

• CSS Development at Large-Scale Websites


• The History of CSS Resets


• A List of CSS Style Guides for Inspiration


• 5 CSS Effects Libraries for Supercharging Your Designs

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post A Close Look at CSS Box Shadow appeared first on Six Revisions.

A Close Look at CSS Box Shadow