How to Set a Box-Shadow on One Side of the Element

To set a box-shadow on one side of the element, use the box-shadow property. This property has four length parameters and a color.

Using the box-shadow property follow this syntax:

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass) 

box-shadow: h-offset v-offset blur spread color;

h-offset sets the shadow horizontally. A positive value sets the right shadow, and a negative value sets the left one.

v-shadow sets the shadow vertically. A positive value sets the shadow below the box, and a negative value sets the shadow above the box.

blur is an optional attribute, which blurs the box-shadow.

spread sets the shadow size.

color is an optional attribute that sets the shadow color.

Let’s start by creating a shadow on the left side of the element. Follow the steps below.

Create HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>W3Docs</h1>
  </body>
</html>

Add CSS

h1 {
  text-align: center;
  background: #c4c4c4;
  padding-top: 50px;
  color: #000000;
  width: 400px;
  height: 120px;
  box-shadow: -8px 0px 8px #000000;
}

Here is the full code.

Example of adding a box-shadow on the left side of the element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-align: center;
        background: #c4c4c4;
        padding-top: 50px;
        color: #000000;
        width: 400px;
        height: 120px;
        box-shadow: -8px 0px 8px #000000;
      }
    </style>
  </head>
  <body>
    <h1>W3Docs</h1>
  </body>
</html>

Result

W3Docs

Example of adding a box-shadow on the bottom of the element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-align: center;
        background: #c4c4c4;
        padding-top: 50px;
        color: #000000;
        width: 400px;
        height: 120px;
        box-shadow: 0 10px 10px #000000;
      }
    </style>
  </head>
  <body>
    <h1>W3Docs</h1>
  </body>
</html>

When adding a box-shadow only on one side of an element, the focus must be on the last value (the spread radius). It decreases the overall size of the box-shadow, both horizontally and vertically.

Now, we’ll show another example where we use the "inset" value to create a shadow inside the box as the shadow is placed outside the box by default.

Example of adding a box-shadow inside the element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-align: center;
        background: #c4c4c4;
        padding-top: 50px;
        color: #000000;
        width: 400px;
        height: 120px;
        box-shadow: 0px 10px 20px #000000 inset;
      }
    </style>
  </head>
  <body>
    <h1>W3Docs</h1>
  </body>
</html>

In our last example, we use both outside and inside shadows on one side of each presented element.

Example of adding outside and inside shadows:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc;
        padding: 20px;
      }
      .left {
        float: left;
        margin-left: 20px;
      }
      .box {
        width: 110px;
        height: 110px;
        background: #fff;
        color: #9e9e9e;
        margin: 0 auto;
        margin-bottom: 20px;
        text-align: center;
        line-height: 100px;
      }
      .shadow-bottom {
        box-shadow: 0 8px 10px -6px #000000;
      }
      .shadow-top {
        box-shadow: 0 -8px 10px -6px #000000;
      }
      .shadow-left {
        box-shadow: -8px 0 10px -6px #000000;
      }
      .shadow-right {
        box-shadow: 8px 0 10px -6px #000000;
      }
      .inner-shadow-bottom {
        box-shadow: inset 0 8px 10px -6px #000000;
      }
      .inner-shadow-top {
        box-shadow: inset 0 -8px 10px -6px #000000;
      }
      .inner-shadow-left {
        box-shadow: inset 8px 0 10px -6px #000000;
      }
      .inner-shadow-right {
        box-shadow: inset -8px 0 10px -6px #000000;
      }
    </style>
  </head>
  <body>
    <div class="left">
      <div class="shadow-bottom box">bottom</div>
      <div class="shadow-top box">top</div>
      <div class="shadow-left box">left</div>
      <div class="shadow-right box">right</div>
    </div>
    <div class="left">
      <div class="inner-shadow-bottom box">top inset</div>
      <div class="inner-shadow-top box">bottom inset</div>
      <div class="inner-shadow-left box">left inset</div>
      <div class="inner-shadow-right box">right inset</div>
    </div>
  </body>
</html>