If you’ve never worked with the box shadow property, let me quickly introduce you to it.

The
css3 box shadow property has 6 values, which goes like this:

box-shadow : 2px 2px 5px hsla

// box-shadow :vertical_offset h

1
box-shadow: 2px 2px 5px hsla(0,0%,0%,.2);
2
// box-shadow:vertical_offset horizontal_offset blur_radius color
3

Throughout this tutorial I’ll be mentioning some other css3 properties which enable many of the
fancy effects you’ll see below. Namely:

 CSS3 Gradients
 CSS3 Transforms
 Z-index
 Absolute Positioning
 Psuedo Selectors (:before & :after)

I won’t be going in to any details on these properties, but you’ll quickly learn how they are used
to create some of the box shadows. Here we go.

Step 1: Set up our HTML

The great news here, is that all of the effects below are built on either a single div element, or
a div with a nested element. A maximum of 2 HTML tags are required for each effect!

<div id="box">
<div id="inner">
</div>
</div>

1 <div id="box">
2 <div id="inner">
3 </div>
4 </div>

Step 2: Add our basic CSS styling

 #box{
w idth:400px;
height:305px;
margin:50px auto;

1 #box{
2 width:400px;
3 height:305px;
4 margin:50px auto;
5 position:relative;
6 background-color:#000;
7 border:5px solid #fff;
8}

Here is what our design should look like now

Step 3: Add our first css box shadow!

#box:before{
-w ebkit-transform: sk
box-shadow :5px 5px
position:absolute;

1 #box:before{
2 -webkit-transform: skew(0deg, 4deg);
3 box-shadow:5px 5px 5px #000;
4 position:absolute;
5 background-color:black;
6 bottom:-5px;
7 right:0;
8 content:'';
9 z-index:-6;
10 width:220px;
11 height:175px;
12 right:5px;
13 }

There is quite a bit going on in this big lump of code. Let me quickly explain the process of
getting to this.

1. Add our box shadow via :before pseudo selectors and make it blue (I’ve made mine blue
simply for illustration purposes)
2. Give it an absolute position in the bottom right
3. Add the css3 skew transform propery

4. Give it a z-index that pushes it behind our ‘box’

5. Change the color to black

6. Rinse and repeat using the other :after pseudo selector, skew in the opposite direction,
and position in the bottom left like so…
#box:after{
-w ebkit-transform: sk
box-shadow :-5px 5px
position:absolute;

7.

1 #box:after{
2 -webkit-transform: skew(0deg, -4deg);
3 box-shadow:-5px 5px 5px #000;
4 position:absolute;
5 bottom:-5px;
6 content:'';
7 z-index:-5;
8 width:220px;
9 height:175px;
10 background-color:black;
11 left:5px;
12 }

8.
 9.

Step 4: Add the falloff

That’s it for our #box div. We’re going to work on #inner next. Now that we have our shadow
nicely tucked behind our element, we want to add an extra degree of realism. I’m calling this
‘falloff’. As a shadow gets further from the point of origin where the light strikes an object it
fades, and becomes less intense. We should see this start to happen on the corners of our box, as
the shadow denotes that the corers are ‘lifted’ up creating the page curl effect I originally posted
about. In order to accomplish this, we’re going to call upon css3 gradients and some more
absolute positioning. Here is the bit of css code to get the job done, and a couple of photos for
the visually inclined.

left:-10px;
z-index:1;
}

1 #inner{
2 background: -webkit-gradient(linear, left top, right top, color-
3 stop(0%,rgba(221,221,221,1)), color-stop(50%,rgba(221,221,221,0.01)), color-
4 stop(100%,rgba(221,221,221,1)));
5 width:420px;
6 height:30px;
7 z-index:-1;
8 position:absolute;
9 bottom:-35px;
10 left:-10px;
 z-index:1;
}

This bit of code adds a css3 gradient that goes from the same color as the background of the page
(which is how this particular falloff trick works, and is a requirement) and fades in transparency
at the same time. Essentially we are going from semi-transparent gray -> completely transparent
gray -> semi transparent gray. Once we’ve created the gradients, we position it in front of our
shadows, giving us that lovely falloff effect! Here are the illustrations:
Sooo sexy.

Step 5: Add some more gradients to further enhance the ‘curl’

Now that we’ve got our shadow in place, we’ll just add a few refinements relying on our old css
friends, gradients and pseudo selectors. We’ll be creating an angular gradient going from the top
left to the bottom right, and another from the top right to the bottom left. Here’s the code,
followed by the illustrations:

#inner:before{

background
color-stop(0%,rgba(0,0,0,.1)), c

1 #inner:before{
2 background: -webkit-gradient(linear, left top, right bottom, color-
3 stop(0%,rgba(0,0,0,.1)), color-stop(85%,rgba(255,255,255,0.01)), color-
4 stop(100%,rgba(255,255,255,.35)));
5 width:400px;
6 height:305px;
7 z-index:5;
8 content:'';
9 position:absolute;
10 left:10px;
11 top:-310px;
12 }
13 #inner:after{
14 background: -webkit-gradient(linear, left bottom, right top, color-
15 stop(0%,rgba(255,255,255,.35)), color-stop(15%,rgba(255,255,255,0.01)), color-
16 stop(100%,rgba(255,255,255,.05)));
17 width:400px;
18 height:305px;
19 z-index:5;
20 content:'';
position:absolute;
left:10px;
top:-310px;
}

This code should create something like this (I’ve switched the background color of the box to
black to illustrate the effect)

That’s it! All of the samples in the example file are just variations of these same tools, with
some extra tricks and twists! The CSS3 3D text affect was created with multiple box shadows
on one element (which is another handy feature of css3 box shadows!)

Here is the final look, this time with an image in the background as well: