<div class="container">
  <h1>Compositing multiple CSS mask layers: only partially working on Webkit browsers</h1>

  <article class="add-operator">
    <h2>Add Operator (source over)</h2>
    <img class="masked add" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/backdrop.jpg" alt="Masked image">
  </article>

  <article class="subtract-operator">
    <h2>Subtract Operator (source out)</h2>
    <img class="masked subtract" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/backdrop.jpg" alt="Masked image">
  </article>

  <article class="intersect-operator">
    <h2>Intersect Operator (source in)</h2>
    <img class="masked intersect" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/backdrop.jpg" alt="Masked image">
  </article>

  <article class="intersect-operator">
    <h2>Exclude Operator (XOR)</h2>
    <img class="masked exclude" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/backdrop.jpg" alt="Masked image">
  </article>
</div>
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
}

article {
  margin-bottom: 32px;
}

.masked {
  margin: 20px auto;
  display: block;
  max-width: 100%;
  height: 450px;
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/trapeze.png), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/alpha-star.png);
  mask-position: center center, bottom right;
  mask-repeat: no-repeat, no-repeat;
  mask-size: 350px 350px, 350px 350px;
}

.add {
  mask-composite: add;
}

.subtract {
  mask-composite: source-out;
}

.intersect {
  mask-composite: source-in;
}

.exclude {
  mask-composite: XOR;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.