CSS3 Tutorial: box shadow

box-shadow

box-shadow:

Syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
//For example:
box-shadow: inset 2px 2px 5px 3px black;

Browser support

Beneath an example of placing a background shadow using CSS3:

Example 1: text on paper with a background shadow (see image 1)

De HTML code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Backgroundshadow using CSS3</title>
<link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="backgroundshadow">          
    <h3>Backgroundshadow using CSS3 </h3>          
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Duis ligula lorem, consequat eget, tristique nec, auctor quis, 
    purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean 
    viverra malesuada libero. Fusce ac quam. Donec neque. Nunc 
    venenatis enim nec quam. Cras faucibus, justo vel accumsan 
    aliquam, tellus dui fringilla quam, in condimentum augue 
    lorem non tellus.
    </p>          
</div>          
</body>
</html>

The CSS

/* Background shadow */
    #backgroundshadow{
	float:left;
	background-color: #ffc;
	width:220px;
	padding: 20px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);     
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
	}
Image 1. background shadow using CSS3

Check this example in your browser

More Examples

The most basic way of setting a box shadow on a box is using box-shadow: [x offset] [y offset] [color]:

CSS3 box-shadow1box-shadow: 5px 3px black;

Adding another number lets you specify a blur radius:

CSS3 box-shadow2box-shadow: 3px 3px 5px black;

You can even set a spread radius (this extends the shadow rect):

CSS3 box-shadow3box-shadow: 0 0 5px 5px black;

Negative spread values are possible, too:

CSS3 box-shadow4box-shadow: 0 5px 5px -3px black;

Another interesting feature is the ability to set multiple box shadows, separated by comma, starting with the topmost shadow:

CSS3 box-shadow5box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

Shadow Opacity

What if you’d like the shadow to be more transparent? Just use the rgba syntax when setting the color and specify an appropriate alpha value:

CSS3 box-shadow6box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);

Increasing the opacity of a shadow is slightly more tricky. First you should try playing with the spread radius, but if that doesn’t give the right results, duplicating the shadow layer works, too:

CSS3 box-shadow7box-shadow: 3px 3px 5px black, 3px 3px 5px black;

Inset Box Shadows

Finally I’m getting to the reason I’m writing this blog post in the first place. Just over a week ago, Michael Ventnor added support for inset box shadows.

Using inset box shadows is as simple as adding the inset keyword to a box shadow layer.

CSS3 box-shadow8box-shadow: inset 2px 2px 5px black;

Inset and outset shadows can be combined:

CSS3 box-shadow9box-shadow: inset 2px 2px 5px black, 2px 2px 5px black;

Check these examples in your browser

Leave a comment