Cardeo Design Blog, Code, Design, WordPress, Minimal, CSS, Freebies, Twitter, Facebook, Social Media

Using The CSS3 box-shadow Property

February 18th, 2010

I recently published a post on the text-shadow property. The box-shadow property is quite similar, and easy to build into your layout. In this tutorial, I’ll show you how to add a shadow to a box only using a little CSS3.

Browser Support

Currently, the text-shadow property works in Safari, Firefox, Opera, and Chrome.

Adding a shadow to a box

A shadow is added to a box using the box-shadow property. Just like the text-shadow property, the first pixel value controls the horizontal offset, the second controls the vertical offset, and the third controls the blur. The fourth value is the shadow color, which is set using a hex number.

Here’s what the CSS looks like

.box {
 color: #fff;
 box-shadow: 5px 5px 5px #000;
 -moz-box-shadow: 5px 5px 5px #000;
 -webkit-box-shadow: 5px 5px 5px #000;
 background-color: #c06;
 padding: 5px;
}

Here’s what it looks like

This example shows a traditional shadow, offset to the bottom left. I also inserted a couple additional styles to fill out the box.

This is a box with a shadow

Reversing the shadow

If you’d like to reverse the shadow, and have it display top-left, you can do so with the following CSS code.

Here’s what the CSS looks like

.box-two {
 color: #fff;
 box-shadow: -5px -5px 5px #000;
 -moz-box-shadow: -5px -5px 5px #000;
 -webkit-box-shadow: -5px -5px 5px #000;
 background-color: #c06;
 padding: 5px;
}

Here’s what it looks like

Using negative values, it is easy to reverse the shadow.

This is a box with a shadow

Tags: box-shadow, css3