Remove Box Shadow on One Side - bottom

user_3791751 0
Viewed 36

Is there any way to remove the bottom rendering of a box shadow?

This is my CSS:

body {
  width: 300px;
  height: 200px;
  margin: 20px auto;
  box-shadow: blue 0px 0px 0px 5.5px, yellow 0px 0px 0px 9px, purple 0px 0px 0px 13px, rgba(0, 0, 0, 0) 5px 5px 15px 10px inset;
}

Here's the fiddle: https://jsfiddle.net/quint/2r3to5L0/3/

The CSS would target one element, where the desired box shadow would be open at the bottom (an upside-down U )

css
1 Answers

clip-path can do it:

body {
  width: 300px;
  height: 200px;
  margin: 20px auto;
  box-shadow: blue 0px 0px 0px 5.5px, yellow 0px 0px 0px 9px, purple 0px 0px 0px 13px, rgba(0, 0, 0, 0) 5px 5px 15px 10px inset;
  
  clip-path: inset(-100vmax -100vmax 0); /* 0 to the bottom side and big negative values on the others */
}

user_86203330
Related