css Question posted in
Some basic documentation can be found here.

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    To apply a drop shadow to an SVG and use it with a CSS instruction, I use the defs SVG tag, which allows you to define graphical objects. Additionally, you cannot apply this filter to a mask in an SVG, likely because the filter’s rendering occurs afterward, interfering with the mask. Therefore, I chose to create a container to apply the shadow to it instead.

    <style>
  body {
    background-color:#E7E9EB;
    padding: 60px;
  }
  #couple {
    position: relative;
    z-index: 2;
    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;
    mask-image: url("https://dev.cycladic.events/svg/zig-zag.svg") 20% / 20px / 0 round;
  }
  #bg-couple{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
    content: "";
    display:block;
    height:400px;
    width: 600px;
    left: calc(50% - 300px);
    filter:url(#filterDropShadow);
  }
  </style>

<div id="bg-couple">
  <div id="couple"></div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
    <defs>
        <filter id="filterDropShadow" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
        <feOffset in="blur" dx="5" dy="5" result="offsetBlur" />
        <feFlood flood-color="black" flood-opacity="0.5" result="shadowColor" />
        <feComposite in="shadowColor" in2="offsetBlur" operator="in" />
        <feMerge>
         <feMergeNode /> <!-- Shadow -->
        <feMergeNode in="SourceGraphic" /> <!-- Original element -->
      </feMerge>
    </filter>
  </defs>
</svg>

    Here is a codepen.

    Please note that -webkit-mask-box-image is neither standard nor in the process of being standardized and will not work on all browsers.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search