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:

Implementation

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

<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:

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

box-shadow takes in the following parameters:

box-shadow: h-shadow v-shadow blur spread color |inset|initial|inherit;

Full .box css

.box {
  box-shadow: 0px 0px 15px #888888;
  padding: 20px;
  margin: auto;
}

Inner Shadow

Code

<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>