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.

<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;
PropertyWhat It Does
h-shadowSpecifies the horizontal position of the shadow relative to the element
v-shadowSpecifies the vertical position of the shadow relative to the element
blurThe amount of bluring for our shadow
spreadThe distance over which our shadow is spread
colorThe color of our shadow
insetShadow goes from outer shadow to inner shadow
initialSets to default value
inheritInherits property from parent element

Full .box css

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

Inner Shadow

Box Shadow Example

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

Elliot Forbes
Twitter: @Elliot_f

Hey, I'm Elliot and I've been working on TutorialEdge for the last 4 years! If my work has helped you in any way, shape, or form then please consider supporting my work.

become a patron Buy Me A Coffee