Question 244204 in CSS Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    I had the same problem once, but after a lot of testing it never really worked as I wanted it to.

    The only way I managed to resolve my problem, is by adding the first shadow via :after pseudo-element and adding another shadow to that.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search