Home » CSS » CSS Box Shadow Example

About Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.

CSS Box Shadow Example

In this example, we will go through the box-shadow property of css.

Just like the text-shadow property, box-shadow will give an element of html a new look by adding different styled shadows.

As you can imagine, this is going to be more of an examples show rather than exaplanation because the property is pretty straight-forward.

The cases you’ll see below, are of a very high usage all over the web, and I recommend you consider these shadow designs on your projects.

They will make content on boxes in your website more catchy and attractive, so do not hesitate to use them.
 

1. Prerequisites

Below, I will present you to the necessary knowledge you should have to get through this.

1.1 Basic Set Up

First, go ahead and create a new html file and add the basic html and css like this:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Buttons</title>
</head>
<body>

	<!-- STYLE SECTION -->

	<style type="text/css">

  	</style>


	<!-- HTML SECTION -->

</body>
</html>

1.2 Pseudo-Elements :before and :after

A pseudo-element creates a phoney element and inserts it before or after the content of the element that you’ve targeted.

We will use the :before and :after pseudo-elements to add shadows left, right, top, bottom or combinations of these.

See this simple example of its usage so you have a better clue:

– HTML

<!-- HTML SECTION -->
<h1 class="text">This is the first item</h1>

– CSS

<!-- STYLE SECTION -->

.text:before {
	content:"1. ";   /* what to display before text element */
}

.text:after {
	content: "!";   /* what to display after text element */
}

</style>

This would give the number 1. before the text and ! after the text like this:

:before and :after pseudo elements

:before and :after pseudo elements

1.3 Extra properties to consider

Along with the pseudo-elements, there are also some properties I’d like you to understand:

z-index – specifies the stack order of an element.

position – allows you to position elements within a page.

content – used when appyling :before and :after pseudo-elements.

left, right, top, bottom – defines the left, right, top, bottom edge of an element.

transform – self-explanatory, transforms an object by degree, scale ect.

2. Basic Box-Shadow Property

Application of the box-shadow property is pretty simple. It goes like this:

box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;

2.1 Attribute values explanation

But what do these attributes mean?

1. The horizontal offset (required):

  – A positive value will make the shadow lie on the right of the box.
  – A negative offset will make it lie on the left of the box.

2. The vertical offset (required):

  – A negative value makes the shadow lie above the box.
  – A positive value make it lie below the box.

3. The blur radius (required):

  – Sharp shadows come with a value of 0, and the higher the number, the more blurred it will be, and the further out the shadow will extend.

4. The spread radius (optional):

  – Positive values increase the size of the shadow.
  – Negative values decrease the size.

Default is 0 (the shadow is same size as blur).

5. Color (required):

  – Using HEX color: e.g. #ccc, #9895AF ect.
  – Using RGBA color: e.g. rgba(192,192,192,0.3);

2.2 Application of the basic property

Create a div with a class of box.

<!-- HTML SECTION -->
<div class="box basic">
	<h3>WEB CODE GEEKS</h3>
</div>

We are using multiple classes on an element, in this case two, because the box element will be the same for all examples, while the other class will contain distinctive attributes according to the effect we want to create.

Now give the body a light gray color and box element these initial attributes to create a standard now.

<!-- STYLE SECTION -->
body {
	background:#E6E6E6;
}

.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

And the basic application of the box-shadow property would be:


 /* no horizontal shadow, 10px vertical shadow, 6px blur, -6px spread radius, gray color */
 
.basic{
    -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;	
}

A basic shadow applied to a box like above will look like this:

Basic Box-Shadow Application

Basic Box-Shadow Application

3. Advanced 3D Looking Box Shadows

Now, let’s look at some popular designs with shadows.

For the first effect, every line of code is commented so that you know what we are doing.

3.1 Soft Box Shadow on Both Sides

 /* EFFECT 1 */
/* Here shadows are styled as elements to give impressive look */
/* However, the box shadow property is applied at the end to make final touches */

.effect1
{
  position: relative;	/* relative positioning referring to before and after */
}
.effect1:before, .effect1:after  /* apply some mutual properties before and after this element */
{
  z-index: -1;			/* send this element backward */
  position: absolute;	/* absolute positioning referring to effect2 */
  content: "";			/* just required, no need to put anything inside  */
  bottom: 15px;  		/* bottom shadow alignment, less is closer to bottom */
  left: 10px;			/* consider this like a margin left */
  width: 50%;			/* width of the shadow element background */
  top: 80%;				/* consider this as margin top of the shadow element */
  max-width:300px;		/* restricts the max width of the shadow element  */
  background: #777;		/* gives a background color to the shadow element  */
  -webkit-box-shadow: 0 15px 10px #777;	/* compatibility case application */
  -moz-box-shadow: 0 15px 10px #777;	/* compatibility case application */
  box-shadow: 0 15px 10px #777;	/* applied the basic box-shadow property */
  /* rotation of shadows/elements gives that 3D look to the box */
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect1:after
{
  -webkit-transform: rotate(3deg); 	/* aligns the shadow right */
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;					/* consider this like a margin right */
  left: auto;					/* leave this auto to automatically set the left */
}

View:

Soft Shadow on Both Sides

Soft Shadow on Both Sides

3.2 Left and Right Box Shadow

In this effect, we take a look at the left and right box-shadows.


/* LEFT SHADOW */

.effect2
{
  position: relative;
}
.effect2:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

/* RIGHT SHADOW */

.effect3
{
  position: relative;
}
.effect3:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

View:

Right and Left Box-Shadow Applied

Right and Left Box-Shadow Applied

3.3 Hard Box Shadow on Both Sides

In this example, we look at a 3D like effect on both sides box shadow.


/* EFFECT 4 */

.effect4
{
  position: relative;
}
.effect4:before, .effect4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect4:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

View:

Both Sides Box Shadow

Both Sides Box Shadow

3.4 Soft Inset Shadow

You can also set inset shadows in a box element.

/* EFFECT 5 */

.effect5
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect5:before, .effect5:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect5:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

View:

Soft Inset Shadow

Soft Inset Shadow

3.5 Top, Bottom and Left, Right Inset Shadow

These two examples show: top and bottom inset shadow, left and right inset shadow.


/* TOP AND BOTTOM INSET SHADOW */

.effect6
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect6:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

/* LEFT AND RIGHT INSET SHADOW */

.effect7
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

View:

Top, Bottom & Left, Right Inset Shadow

Top, Bottom & Left, Right Inset Shadow

4. Conclusion

Generally speaking, shadows are a great way to make some nice touches on elements.

They do create interesting look and feel of elements and that’s why you should consider using them.

Sometimes the code will be complicated, but feel free to use effects we used in this example, (just copy and paste) if you like any of them just the way they are.

However, if you feel professional at this, you can change values according to your needs.

5. Download

Below you can find all these shadow examples in one html file.

Download
You can download the full source code of this example here: CSS Box-Shadow

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments