How to create box-shadow only on left and right with repeat box?

Question

I try to find solution how to use box-shadow to show shadow left and box on box. My problem shadow on bottom look darker then left and right.

If anyone has the solution already, please kindly help. Thank you.

    .box {
     margin:0;
     box-shadow: 0px 12px 15px 0 #7f7e7f, 0px 7px 2px -1px #7f7e7f;
     height: 150px;
     width: 50%;
     background: #cff;
    }

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

Answer 1

What you need to do is make use of two different box-shadows. One for the left side, and one for the right side. These two box-shadows should be separated by a comma.

The first box-shadow should have a negative horizontal width, and the second box-shadow should have a positive horizontal width. This is the first value in the box-shadow shorthand.

.box {
  margin: 0;
  box-shadow: -10px 0px 0px 0 #7f7e7f, 10px 0px 0px 0 #7f7e7f;
  height: 150px;
  width: 50%;
  background: #cff;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Hope this helps! :)

Answer 2

Below is the code. Hope this is a great help :)

.box {
  margin: 0;
  box-shadow: -10px 0px 0px 0 rgba(0,0,0,0.2), 10px 0px 0px 0 rgba(0,0,0,0.2);
  height: 150px;
  width: 50%;
  background: #cff;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Answer 3

You can simply use the Box-Shadow generator , it's quite simple and fast to use

Example:

.box {
  margin: 0;
  box-shadow: -24px 11px 60px -22px rgba(0, 0, 0, 1), 24px 11px 60px -22px rgba(0, 0, 0, 1);
  height: 150px;
  width: 50%;
  background: yellow;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>