How to Add a Box-Shadow on One Side of an Element

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

Using the box-shadow property follow this syntax:

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

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 an element. Follow the steps below.

Create HTML

<body>
  <h1>W3Docs</h1>
</body>

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>

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

Do you find this helpful?

Related articles