Code Snippet: CSS3 Deep Box Shadow on Elements

Deep Box Shadow have been around for a while, but web designers shied away from them because it was very difficult to implement the effect. Until recently, you had to incorporate a complicated JavaScript code into your website or even create a shadow in the background with Photoshop. Now, thanks to CSS3, you can easily generate deep box shadows with just a few lines in CSS. That’s probably why deep box shadows are all the rage among web designers today.

What is a deep box shadow?

There are different types of shadows depending on the point of light source. There’s the “shallow shadow”, the type of shadow that’s produced when the light source is placed directly above the subject. For example, think about the depth of your shadow if you were standing outside at noon or even 11:00 AM.

And now there’s the deep shadow, the kind of shadow produced when the light source is placed in front or behind of the subject, much like your shadow at 6:00 PM.

Casting a deep shadow effect from your images really livens up your website, only if you don’t overuse it. It looks really slick and modern, and it helps engage the visitor. It sounds strange, but the placement of the deep shadow gives off the illusion of a light source coming from the visitor sitting in front of his computer.

If you’re itching to incorporate deep box shadows into your website, you’re in luck! We just so happen to have a tutorial on how to create a “static” box shadow.

A static box shadow is a shadow that’s permanently placed behind a box or image on your website. It’s pretty easy to create one in 5 steps.

Final Result

1. Upload an image without any borders.

Obtain an “img src” html code for the image and put it in the appropriate place in your style.css or CSS source code file. Be sure to wrap it with a

<div>

   <img src="imagename.jpg" alt=" " />

</div>

2. Create a basic box shadow class.

This class will provide a super shallow shadow around the image. Add the following code to the appropriate place in your style.css or CSS source file:

.css-box-shadow {

        position: relative;

        -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);

        -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);

        box-shadow: 1px 2px 4px rgba(0,0,0,.5);

        padding: 5px;

        background: white;

    } 

3. Deepen the shadow.

To achieve this, you need to create a deep box shadow class. This step will put the shadow over your image. Don’t panic – we’ll fix this in the next step. Add the following code beneath your basic box shadow class:

.css-deep-shadow:after {
        content: '';
        -webkit-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
        -moz-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
        box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
        position: absolute;
        width: 20%;
        height: 40px;
        bottom: 20px;
        right: 90px;
        -webkit-transform: skew(-40deg);
        -moz-transform: skew(-40deg);
        transform: skew(-40deg);       
    }

Play around with the values until you get the type of deep shadow you want.

4. Get rid of the shadow inside the image.

You need to adjust your z-order to position the shadow behind your image. You just need to add z-index to your code, as follows:

.css-deep-shadow:after {
        content: '';
        -webkit-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
        -moz-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
        box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
        position: absolute;
        width: 20%;
        height: 40px;
        bottom: 20px;
        right: 90px;
        z-index: -1;
        -webkit-transform: skew(-40deg);
        -moz-transform: skew(-40deg);
        transform: skew(-40deg);       
    }

5. Apply the CSS to the element

Now you just need to add your css-box-shadow and css-deep-shadow class to the element that wraps your original image. It should look something like this:

<div class="css-box-shadow css-deep-shadow">
   <img src="imagename.jpg" alt=" " />
</div>