How to Set a Box-Shadow Only on the Left and Right Sides

Solutions with CSS

If you want to add a box-shadow only on the left and right sides of an element, we suggest you consider some methods presented in our snippet.

Probably, the best way is using the CSS box-shadow property with the “inset” value. Also, use the :before and :after pseudo-elements, which are absolutely positioned on the right and left sides of the element.

Example of adding a box-shadow on the left and right sides with the :before and :after pseudo-elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div:before {
        box-shadow: -20px 0 20px -20px #001f9c inset;
        content: " ";
        height: 100%;
        left: -20px;
        position: absolute;
        top: 0;
        width: 20px;
      }
      div:after {
        box-shadow: 20px 0 20px -20px #001f9c inset;
        content: " ";
        height: 100%;
        position: absolute;
        top: 0;
        right: -20px;
        width: 20px;
      }
      div {
        background: none repeat scroll 0 0 #f0f1f5;
        height: 120px;
        margin: 30px;
        position: relative;
        width: 120px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Result

Let’s see another example without the :before and :after pseudo-elements.

Example of adding a box-shadow on the left and right sides:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        box-shadow: 12px 0 15px -4px rgba(0, 55, 162, 0.97), -12px 0 8px -4px rgba(0, 55, 162, 0.97);
        width: 120px;
        height: 120px;
        margin: 30px;
        background: #f0f1f5;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Note, that in the example above, we also have a little shadow on the top and bottom of the element. But you can add two more box-shadows to the top and bottom to mask the visible top and bottom shadows.

Example of setting a box-shadow on the left and right sides without any shadow on top and bottom:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        box-shadow: 0 9px 0px 0px #f0f1f5, 0 -9px 0px 0px #f0f1f5, 12px 0 15px -4px rgba(0, 55, 162, 0.97), -12px 0 15px -4px rgba(0, 55, 162, 0.97);
        width: 120px;
        height: 120px;
        margin: 30px;
        background: #f0f1f5;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>