CSS: cropped Box Shadow

Question

is it somehow possible to crop a box-shadow on the left and right to make it look like this:

Or do I need to create this using two independent divs? I would like to make it responsive, and it should keep the relations to each other.

Thanks in advance.

Regards Lars

No, you can not arbitrarily "cut" shadows, AFAIK. Instead of using _two_ divs for this, I would use a positioned pseudo element for the shadow. — CBroe, Jun 12 '23 at 10:50
[What about this solution?](https://jsfiddle.net/g51wmrps/) or [same colors you posted](https://jsfiddle.net/g51wmrps/1/), I've played with it a bit, thanks for [How to get box-shadow on left & right sides only](https://stackoverflow.com/a/11997074/14945696). — Kevin M. Mansour, Jun 12 '23 at 13:32
@KevinM.Mansour Nice, that's exactly what I was trying to achieve. I also played around with using a pseudo element, but did not get a capable result. — Gardinero, Jun 12 '23 at 14:19
@CBroe you maybe not cut a box-shadow but you can make it smaller than the container with a negative spread value :) . clip-path can also be used cutting-off a path standing outside the container itself — G-Cyrillus, Jun 13 '23 at 14:04

score 1 · Answer 1 · answered Jun 12 '23 at 13:11

It is possible to create the background shape with css by using ::after

Using % should allow the box to be responsive yet maintain the aspect ratios.

.box {
  margin: 10% 0%;
  width: 100%;
  background-color: blue;
  position: relative;
  text-align: center;
  &::after {
    content: '';
    position: absolute;
    left: 10%;
    top: -20%;
    width: 80%;
    height: 140%;
    background-color: red;
    z-index: -1
  }
}

button {
  width: 25%;
  height: 2rem;
  border-radius: 20%;
  margin: 2rem;
  padding: 0.5rem;
  border-radius: 1rem;
}

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

Nice, thank you very much! – Gardinero Jun 12 '23 at 14:20 — Gardinero, Jun 12 '23 at 14:20

G-Cyrillus · Answer 2 · 2023-06-13T14:04:01.340

you can set many shadows on a single element. if increase offset and set negative spread radius, you can draw 2 shadows for your expected result.

see https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

possible example, use your size and own values for your shadow(s)

div {
  aspect-ratio: 16/9;
  background: #377172;
  width: 90vmin;
  box-shadow: 0 15vmin 0 -8vmin #CCD5CB, 0 -15vmin 0 -8vmin #CCD5CB
}


/* demo purpose */

html {
  display: grid;
  min-height: 100vh;
  place-items: center
}

div {
  color: white;
  font-size: 10vmin;
  display: grid;
  place-items: center
}

<div>div & 2 shadows</div>

clip-path could also be an option

div {
  aspect-ratio: 16/9;
  background: #377172;
  width: 90vmin;
  box-shadow: 0 0 0 8vmin #CCD5CB;
  clip-path: polygon(0 0, 8vmin  0, 8vmin -8vmin, calc(100% - 8vmin) -8vmin,  calc(100% - 8vmin) 0, 100% 0, 100% 100%,  calc(100% - 8vmin) 100%, calc(100% - 8vmin) calc(100% + 8vmin), 8vmin calc(100% + 8vmin), 8vmin 100%, 0% 100%);
}


/* demo purpose */

html {
  display: grid;
  min-height: 100vh;
  place-items: center;
  /* gives a shadow to the div and its shadow 
  filter:drop-shadow(0 0 5px red); 
  ... for infos only not needed */
}

div {
  color: white;
  font-size: 10vmin;
  display: grid;
  place-items: center
}

<div>div & 1 shadow</div>

CSS: cropped Box Shadow

2 Answers2