How to style the second layer of box shadow to have the same border-radius as the first layer

Question

Here is the css

body {
 font-family: sans-serif;
 border: solid 1px;
 padding: 10px;
 border-radius: 20px;
 box-shadow: rgb(195, 197, 199) 0px 23px 0px -15px,
  rgb(217, 217, 213) 0px 45px 0px -30px;
 }

The border radius on the second layer is not inherited from the parent's border radius as you can see in the image below.

enter image description here

Thanks for your help in advance.

Answer 1

Negative values for spread-radius reduce the size of the shadow. It would makes sense for the border-radius of the shadow to be reduced proportionally, but it seems that the border-radius is being reduced more than it should be. And it certainly doesn’t generate the visual effect that you want in this case.

The easiest workaround may be to reduce your negative spread radius, or increase your border radius. Either of these will result in more rounded shadow corners.

p {
  font-family: sans-serif;
  font-size: 1.5em;
  border: solid 1px;
  padding: 10px 20px;
  border-radius: 15px;
  box-shadow: rgb(195, 197, 199) 0 20px 0 0, rgb(217, 217, 213) 0 40px 0 0;
  margin-bottom: 2.5em;
}

.p2 {
  box-shadow: rgb(195, 197, 199) 0 20px 0 -4px, rgb(217, 217, 213) 0 40px 0 -8px;
}

.p3 {
  box-shadow: rgb(195, 197, 199) 0 20px 0 -8px, rgb(217, 217, 213) 0 40px 0 -16px;
}

.p4 {
  box-shadow: rgb(195, 197, 199) 0 20px 0 -8px, rgb(217, 217, 213) 0 40px 0 -16px;
  border-radius: 100px;
}

<p>Test 1, zero spread</p>
<p class="p2">Test 2, small negative spread</p>
<p class="p3">Test 3, large negative spread</p>
<p class="p4">Test 4, large negative spread &amp; border radius</p>

Or, as @CristophKern says, instead of box-shadow you could use pseudo-elements, which give you more control over their position and shape.

p {
  font-family: sans-serif;
  font-size: 1.5em;
  border: solid 1px;
  padding: 10px 20px;
  border-radius: 15px;
  position: relative;
  background: rgb(255, 255, 255, 0.8);
}

p::before, p::after {
  content: '';
  position: absolute;
  height: 100%;
  border-radius: 15px;
}

p::before {
  top: 20px;
  left: 3%;
  width: 94%;
  background: rgb(195, 197, 199);
  z-index: -1;
}

p::after {
  top: 40px;
  left: 6%;
  width: 88%;
  background: rgb(217, 217, 213);
  z-index: -2;
}

<p>Test 5, pseudo elements</p>