CSS3 Box Shadow Tutorial Image

CSS3 Box Shadow Tutorial

In this tutorial we’ll be looking at how you can add a box shadow effect to elements of your website. Box shadow can help turn elements of your website from flat structures to almost 3D like.

It’s worth checking out the material design documentation on Elevation and Shadows

Output

This is what we’ll be creating:

Box Shadow Example

Implementation

For the above example we first define a div and attach the .box class to that div.

1
2
3
<div class="box">
  <h2>Box Shadow Example</h2>
</div>

In our css we then define our .box class and within that we set our box-shadow attribute like so:

1
box-shadow: 0px 0px 15px #888888;

box-shadow takes in the following parameters:

1
box-shadow: h-shadow v-shadow blur spread color |inset|initial|inherit;
Property What It Does
h-shadow Specifies the horizontal position of the shadow relative to the element
v-shadow Specifies the vertical position of the shadow relative to the element
blur The amount of bluring for our shadow
spread The distance over which our shadow is spread
color The color of our shadow
inset Shadow goes from outer shadow to inner shadow
initial Sets to default value
inherit Inherits property from parent element

Full .box css

1
2
3
4
5
.box {
  box-shadow: 0px 0px 15px #888888;
  padding: 20px;
  margin: auto;
}

Inner Shadow

Box Shadow Example

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="box-2">
  <h2>Box Shadow Example</h2>
</div>

<style>
.box-2 {
  box-shadow: 0px 0px 15px #888888 inset;
  padding: 20px;
  margin: auto;
  width: 50%;
}
</style>
Was This Post Helpful?
Submit a PR: Edit on Github