Box shadow

box-shadow is a CSS property used to create shadows on block-level elements such as the <div>. An element can contain multiple shadows and with it, one can create a shadow on the inside and/or the outside. Most current major browsers support the property but it is however important to offer backwards compatibility.

Note: A free box shadow generator can be found on my website Generators.page.

In this tutorial, I will show you how to create a box shadow through the following topics:

Values

The standard values are as follows:

box-shadow: horizontal vertical blur spread color;
  1. The horizontal offset (required) represents the position on the x axis.
  2. The vertical offset (required) represents the position on the y axis.
  3. A blur radius (optional) of 0 creates a sharp shadow. The higher the number, the blurrier the shadow will be.
  4. The spread radius (optional) represents the size. A negative number creates a smaller shadow and a positive one creates a bigger shadow.
  5. The default color (optional) is black.

Outside box shadow

The standard declaration creates an outside box shadow:

box-shadow: 0 0 5px 0 #000;

One side only

For the first number, a negative one will push the shadow to the left and a positive one to the right.

For the second number, a negative one pushes the shadow closer to the top and a positive one closer to the bottom.

Note: When attempting to create a shadow on one side only, the spread radius requires a negative number in order to hide the excess shadow from the other sides.

Inside box shadow

To add a box shadow on the inside of the element, you will need to use inset after the numerical values and/or color:

box-shadow: 0 0 5px 2px #fff inset;

You would normally declare inset before the numerical values but it is declared after in order to support IE (Internet Explorer).

One side only

With inset, the directions are opposite to the standard. A negative first number pushes the inside box shadow to the right and a positive one to the left.

For the second number, a negative one pushes the shadow to the bottom and a positive to the top.

Please see note from “Outside shadow” > “One side only” above.

Multiple shadows

To create multiple shadows, simply use a comma to separate declarations:

box-shadow: 0 0 2px 5px #000, 0 0 2px 5px #aaa inset;

No box shadow

To remove a box shadow or to declare that there is no box shadow, a value of none is added:

box-shadow: none;

Browser support

A quick search of box-shadow on CanIuse specifies that the property is available across most of today’s current major browsers and some older versions with partial support.

Firefox

To support some of the older Firefox versions, the prefix -moz- is needed:

-moz-box-shadow: inset 0 0 5px 0 #000;

Notice how inset is declared before the numerical values.

Android, Chrome, IOS and Safari

To support some of the older versions of Android, Chrome, IOS and Safari, the prefix -webkit- is needed.

-webkit-box-shadow: inset 0 0 5px 0 #000;

Again, notice how inset is declared before the numerical values.

Internet Explorer

As mentioned before, when inset is used, it must be added at the end of the declaration in order to support IE. An additional rule is also needed:

border-collapse: separate;

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top