<img src="https://assets.digitalocean.com/articles/alligator/css/masking/masking-example1.jpg" width="280" height="420" class="slight-shadow mask5" alt="With SVG mask"> <svg width="280px" height="420px" viewBox="0 0 400 600" class="slight-shadow" style="vertical-align: bottom;">
  <defs>
    <mask id="my-svg-mask2">
      <rect id="Rectangle" fill="#000000" x="0" y="0" width="280" height="420"></rect>
      <circle id="Oval" fill="#FFFFFF" cx="67.5" cy="51.5" r="67.5"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="296.597656" cy="118.597656" r="56.5976562"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="53.4648437" cy="256.464844" r="81.4648437"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="239.587891" cy="313.587891" r="70.5878906"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="366.597656" cy="562.597656" r="56.5976562"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="93.203125" cy="486.203125" r="76.203125"></circle>
    </mask>
  </defs>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://assets.digitalocean.com/articles/alligator/css/masking/masking-example1.jpg" width="400" height="600" mask="url(#my-svg-mask2)"></image>
</svg>
.mask1 {
  -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
  mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
}
.mask2 {
  -webkit-mask-image: radial-gradient(
    circle at 50% 60%,
    black 50%,
    rgba(0, 0, 0, 0.6) 50%
  );
  mask-image: radial-gradient(
    circle at 50% 60%,
    black 50%,
    rgba(0, 0, 0, 0.6) 50%
  );
}
.mask3 {
  -webkit-mask-image: radial-gradient(
    ellipse 90% 80% at 48% 78%,
    black 40%,
    transparent 50%
  );
  mask-image: radial-gradient(
    ellipse 90% 80% at 48% 78%,
    black 40%,
    transparent 50%
  );
}
.mask4 {
  -webkit-mask-image: url("https://d33wubrfki0l68.cloudfront.net/d319533ac3d22c3186498254e0caee871796a29e/d7ce9/images/css/masking/image-mask.png");
  mask-image: url("https://d33wubrfki0l68.cloudfront.net/d319533ac3d22c3186498254e0caee871796a29e/d7ce9/images/css/masking/image-mask.png");
  -webkit-mask-size: 400px 600px;
  mask-size: 400px 600px;
}
.mask5 {
  -webkit-mask-image: url(#my-svg-mask);
  mask-image: url(#my-svg-mask);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.