CSS mask-composite Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Layout */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: #0b1020; color: #e6eef8; padding: 28px; }
.container { max-width: 800px; }
h1 { margin: 0 0 8px 0; font-size: 20px; }
.note { margin: 0 0 18px 0; color: #9fb0cc; font-size: 13px; }
.grid { display: grid; grid-template-columns: repeat(4, 160px); gap: 18px; }
figure { margin: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; position: relative; height: 160px; }
figcaption { position: absolute; bottom: 10px; left: 12px; font-weight: 700; font-size: 13px; text-transform: lowercase; color: rgba(255,255,255,0.92); text-shadow: 0 1px 0 rgba(0,0,0,0.45); }

/* Background artwork for masked elements */
.card {
  background-image: linear-gradient(135deg, #ff7a7a 0%, #ffd97a 40%, #7afcff 100%);
  box-shadow: 0 6px 18px rgba(2,8,23,0.6), inset 0 -8px 30px rgba(255,255,255,0.02);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: cover;
  mask-size: cover;
}

/* Define two circular mask layers (left and right circles). Black = visible, transparent = cut-out. */
:root {
  --two-circles: radial-gradient(circle at 30% 50%, black 40%, transparent 41%),
                 radial-gradient(circle at 70% 50%, black 40%, transparent 41%);
}

/* Default mask-image applied to every card */
.card { -webkit-mask-image: var(--two-circles); mask-image: var(--two-circles); }

/* Different composite modes for the second mask layer (composed over the previous result) */
.add {
  /* combine masks by adding; result shows both circles */
  -webkit-mask-composite: add; /* WebKit-prefixed (historical) */
  mask-composite: add;
}

.subtract {
  /* subtract the second circle from the first */
  -webkit-mask-composite: subtract;
  mask-composite: subtract;
}

.intersect {
  /* keep only the overlap between the two circles */
  -webkit-mask-composite: intersect;
  mask-composite: intersect;
}

.exclude {
  /* exclude the overlapping area (xor-like) */
  /* WebKit historically used 'xor' for this mode */
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Small responsiveness */
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  figure { height: 140px; }
}
</style></head><body><div class='container'>
  <h1>CSS mask-composite demo</h1>
  <p class='note'>Two circular mask layers are combined using different mask-composite modes.</p>

  <div class='grid'>
    <figure class='card add'>
      <figcaption>add</figcaption>
    </figure>

    <figure class='card subtract'>
      <figcaption>subtract</figcaption>
    </figure>

    <figure class='card intersect'>
      <figcaption>intersect</figcaption>
    </figure>

    <figure class='card exclude'>
      <figcaption>exclude</figcaption>
    </figure>
  </div>
</div></body></html>