Search code examples
css

Drop shadow behind a masked element

Trying to create the effect of an old paper photograph, with wavy edges and a subtle shadow underneath that will add a realistic effect.

I have applied a mask-box-image using an svg file for its wavy edges. Then added both box-shadow AND filter:drop-shadow, but no shadow is introduced. It seems the mask hides the shadow. I can have either the wavy edges OR the shadow. How could I possible mask that section to have those wavy edges AND keep the shadow?

And here's the code used:

body {
  background-color: #E7E9EB;
}

#couple {
  height: 400px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  background-image: url('https://dev.cycladic.events/wp-content/media/cycladic-pavilion-couple-retouched-1200x798.jpg');
  background-size: cover;
  -webkit-mask-box-image: url("https://dev.cycladic.events/svg/zig-zag.svg") 20% / 20px / 0 round;
  filter: drop-shadow(10px 10px 0 black);
  box-shadow: 10px 10px 0 0 black;
}
<h1 style="text-align: center; ">Wavy edges mask</h1>
<div id="couple"></div>

Solution

  • The easiest way is to consider an extra wrapper. You can also move everything to a pseudo-element and the main element will be the extra wrapper:

    body {
  background-color: #E7E9EB;
}

#couple {
  height: 400px;
  max-width: 600px;
  margin: auto;
  filter: drop-shadow(10px 10px 0 black);
  display: grid;
}
#couple:before {
  content:"";
  background-image: url('https://dev.cycladic.events/wp-content/media/cycladic-pavilion-couple-retouched-1200x798.jpg');
  background-size: cover;
  -webkit-mask-box-image: url("https://dev.cycladic.events/svg/zig-zag.svg") 20% / 20px / 0 round;
}
    <h1 style="text-align: center; ">Wavy edges mask</h1>
<div id="couple"></div>