More Web Design Tutorials

CSS3 – Box Shadow

December 15, 2012

This is another nifty new property that allows us to easily create visual effects without having to use images. And, best of all, it’s supported by all current major browsers.

The box-shadow property works with several values – in this order:

• Horizontal Shadow (Required)
• Vertical Shadow (Required)
• Blur (Optional)
• Spread (Optional)
• Color (Optional)
• Inset (Optional)

That means that at the very least, we have to provide the vertical and horizontal direction to our shadow:

Box-Shadow Basics: Horizontal and Vertical Shadow

And guess what?

This shows us two things: the default shadow color is black – pretty good choice for a shadow, isn’t it? – and we can also see that the shadow acts kind of like a float (See the ‘A’ to the left of the shadow? That’s the only letter you can see in a line of text I put there – no worries, it’s nothing important.) So now we know that we have to clear the space the shadow takes up by adding margins to either the shadow box or whatever follows. Like so:

Box-Shadow: Color

If we do not want the default black shadow, we add the color our choice to our direction:

Box-Shadow: The Blur

As we can see, the default blur status of our shadow isn’t really very blurry. It’s a pretty solid-looking ‘shadow’ with a very unshadowlike sharp edge. Adding a third set of properties to our dimensions allows us to control that:

I have also increased the bottom margin, as adding the blur takes up more space.

Box-Shadow: The Spread

We can also define how big the blurry area is by adding a fourth set of dimensions – the spread:

And we can see that now, our shadow takes up even more space than before, and we’ll have to increase the bottom margin if we want whatever comes before or after to clear the shadow. Luckily, the blur our shadow has makes it somewhat transparent, and we can see right through it.

Box-Shadow: Inset

There is one final property we can direct, and that is where the blurry area of our shadow goes. Outset is the default (meaning to say so would be redundant), and it puts the blur around the outer perimeter of the shadow. But if we add ‘inset’ to our code, things end up looking differently:

Wait!!!! This isn’t right – our yellow box is gone – the shadow has taken over. Apparently, the height of 50px I have been using for the box isn’t big enough to allow for all that shadow.

Changing the box height to 100px makes quite a difference:

Now we just have to add some padding, so our content moves into the actual box and away from the shadow area – unless that’s where you want it – but I don’t.

Note that adding the padding increases the size of the entire object, but that belongs to a box model tutorial.

If you have any questions about this tutorial or run into trouble trying it yourself, post your question/problem in the Killersites Forum for help.