svg as background image with mask to change the color and with drop-shadow to show the shadow

Question

i am a beginner to code html and css, so a question about svg. when i use the svg as background image and want to change the color also give the shadow, it didn't work with the two properities at the same time. hope someone can help me:

    .image-container {
        width: 100px;
        height: 100px;
        background-size: 100%;
        background-color: #E1A95F;
        -webkit-mask-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg");
        -webkit-mask-size: cover;
        filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
    }

   <div class="image-container"></div>
    


 

Answer 1

Apply the mask to a pseudo element because you need an extra element to apply the filter. It should be an element where you don't apply the mask.

.image-container {
  width: 100px;
  height: 100px;
  filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75));
}
.image-container:before {
  content:"";
  display:block;
  height:100%;
  background-color: #E1A95F;
  -webkit-mask-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg");
  -webkit-mask-size: cover;
}

<div class="image-container"></div>