Applying mask to box-shadow

Question

I have a div with a mask applied to it. I noticed that I can't apply a box-shadow on that same div, so I must move the shadow to a "wrapper" div.

The problem is that if the shadow is placed on the shadow div, the mask is not applied to the shadow.

How can I apply a mask to a div and to it's shadow?

.wrapper {
  width: 200px;
  height: 200px;
  box-shadow: 17px 13px 7px 3px rgba(0,0,0,0.75);
}

.b {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: 2px solid black;


  
  -webkit-mask: radial-gradient(
    circle at center top,
    transparent 30px,
    black 31px
  ) top / 100% 51%, 
  radial-gradient(
    circle at right bottom,
    transparent 30px,
    black 31px
  ) right bottom / 51% 51%, 
  radial-gradient(
    circle at left bottom,
    transparent 30px,
    black 31px
  ) left bottom / 51% 51%;
  
  -webkit-mask-repeat: no-repeat;
}

<div class="wrapper">
  <div class="b"></div>
</div>

Perhaps SVG is the way to go here... – Wais Kamal Nov 02 '20 at 17:46 — Wais Kamal, Nov 02 '20 at 17:46

score 5 · Accepted Answer · answered Nov 02 '20 at 20:09

You need a drop-shadow, not a box-shadow:

.wrapper {
  width: 200px;
  height: 200px;
  filter:drop-shadow(17px 13px 7px rgba(0,0,0,0.75));
}

.b {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: 2px solid black;


  
  -webkit-mask: radial-gradient(
    circle at center top,
    transparent 30px,
    black 31px
  ) top / 100% 51%, 
  radial-gradient(
    circle at right bottom,
    transparent 30px,
    black 31px
  ) right bottom / 51% 51%, 
  radial-gradient(
    circle at left bottom,
    transparent 30px,
    black 31px
  ) left bottom / 51% 51%;
  
  -webkit-mask-repeat: no-repeat;
}

<div class="wrapper">
  <div class="b"></div>
</div>

This does exactly what I need, but I noticed that the CPU usage of Chrome increases by a lot because of this filter. It totally makes sense, as the filter is continuously calculating and re-painting the shadow. Is there a way I can tell Chrome to go a little bit slower with the re-painting? (I tried "will-change: transform", but it barely has any effect) — alexandernst, Nov 03 '20 at 23:35

Applying mask to box-shadow

1 Answers1