CSS3: box-shadow and inset-shadow

January 22, 2011 CSS3 12 comments

With the box-shadow property of CSS3, we can add shadows to the different elements on web page, such as div, span or images.
Following is the syntax for box-shad

box-shadow: <horizontal> <vertical> <blur> <color> <inset>

Horizontal offset: A positive value places the shadow on the right of the box, while the negative value will place the shadow on the left of the box.

Vertical offset: A positive value places the shadow below the element, while the negative value will place the shadow above the element.

Blur(Optional): A positive value of blur increases the blur and make the box shadow softer. The negatives are not allowed for the blur. If value of blur is not specified, it uses the default value 0, which mean no blur.

Color(Optional): The color value for the shadow. We can either use RGB colors or Hexadecimal colors.

Inset(Optional): The inset property creates an inner shadow effect which means that the gradient effect will be inside of the div.

Examples of box-shadow:

The general properties of our box are as following:

background-color:#F1F1F1;
width: 300px;
padding:10px;
margin:20px;

Box shadow without blur:

We can add the basic shadow without blur as following:

-moz-box-shadow: 8px 8px #989898;
-webkit-box-shadow: 8px 8px #989898;
 box-shadow:8px 8px #989898;

The output of the above code will be

This is the box with only horizontal and vertical shadow attributes.

Box shadow with blur

In the following code, we have added the option attribute of blur:

-moz-box-shadow: 8px 8px 8px #989898;
-webkit-box-shadow:8px 8px 8px #989898;
box-shadow:8px 8px #989898;

The output is as following

This is the box with only horizontal and vertical shadow attributes.

Box shadow with inset

The inset can be used as following:

-moz-box-shadow:inset 8px 8px #989898;
-webkit-box-shadow:inset 8px 8px #989898;
box-shadow:8px 8px #989898;

The output is

This is the box with horizontal, vertical and inset shadow attributes.

Box shadow with blur and inset

In following example, we use blur and inset together:

-moz-box-shadow:inset 8px 8px 8px #989898;
-webkit-box-shadow:inset 8px 8px 8px #989898;
box-shadow:8px 8px #989898;

The output is

This is the box with only horizontal and vertical shadow attributes.

Tested on:

Safari 5
FF 3.6
Opera 11
Chrome 8
IE 9

Please note that box-shadow will not work on any version of Internet Explorer older than IE 9.

I hope this article was any helpful. If you have any question or suggestions, please let me know =)
Also, if you liked this article, please share this page. Thanks.