CSS Masking, Clipping, and Compositing

The essentials

Quick reference

One focused task per row. Jump to the related section for complete, working examples.

Use	Syntax	Examples
Clip to a circle	`.avatar { clip-path: circle(50%); }`	View examples
Fade with a mask	`.photo { mask-image: linear-gradient(#000 70%, transparent); }`	View examples
Clip a polygon	`.tag { clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); }`	View examples
Clip an inset round rect	`.panel { clip-path: inset(1rem round 1.5rem); }`	View examples
Reference an SVG clipPath	`.portrait { clip-path: url(#portrait-clip); }`	View examples
Select the clipping box	`.badge { clip-path: circle(45%) content-box; }`	View examples
Load a mask image	`.logo { mask-image: url('/masks/logo.svg'); }`	View examples
Size one mask layer	`.logo { mask-size: contain; mask-position: center; mask-repeat: no-repeat; }`	View examples
Choose alpha interpretation	`.art { mask-mode: alpha; }`	View examples
Set mask origin and clip	`.card { mask-origin: content-box; mask-clip: padding-box; }`	View examples
Add mask layers	`.shape { mask-composite: add; }`	View examples
Subtract a mask layer	`.ring { mask-composite: subtract; }`	View examples
Gate a masking enhancement	`@supports (mask-image: linear-gradient(#000, transparent)) { .hero { mask-image: linear-gradient(#000, transparent); }; }`	View examples

Clipping draws a hard boundary around visible pixels; masking derives partial or full transparency from an image, gradient, or SVG mask. Start with complete, usable content, then add these effects as visual enhancement. Choose explicit reference boxes and layer order, test resource failures, and remember that changing painted pixels does not rewrite the document's semantics or reading order.

Step by step

Detailed examples

Choose clipping for edges and masking for coverage

A clipping path makes pixels inside its region visible and pixels outside invisible, producing a hard boundary. A mask computes coverage per pixel, so gradients and translucent source pixels can create soft fades. Both operate after layout: the element keeps its original box, and surrounding content does not reflow around the visible silhouette.

Compare a hard crop with a soft fade

.hard-crop { clip-path: ellipse(48% 38% at 50% 50%); }
.soft-fade { mask-image: radial-gradient(circle, #000 55%, transparent 75%); }

Back to quick reference ↑

Build hard boundaries with basic shapes or SVG

circle(), ellipse(), inset(), and polygon() scale with a box and are usually the simplest clipping sources. A url() can reference an SVG clipPath when geometry needs reuse or authoring in SVG coordinates. Clipped-out areas do not receive pointer events by default, but the element's layout bounds and keyboard focus behavior remain unchanged.

Responsive ticket silhouette

.ticket { clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0 100%); }
.ticket:focus-visible { outline: .2rem solid #1d4ed8; outline-offset: .25rem; }

Reference a reusable SVG clipPath

<svg width="0" height="0" aria-hidden="true"><defs><clipPath id="portrait-clip" clipPathUnits="objectBoundingBox"><circle cx=".5" cy=".5" r=".48"/></clipPath></defs></svg>
<img class="portrait" src="person.jpg" alt="Sam at the workshop">

Back to quick reference ↑

Control the geometry used for positioning and clipping

A geometry box such as content-box, padding-box, or border-box determines the coordinate space for a basic clip shape. Masks split this responsibility: mask-origin establishes the positioning area, while mask-clip limits the affected painting area. State both when padding or borders make the defaults ambiguous.

Keep the mask aligned to content but paint through padding

.card { padding: 2rem; border: .5rem solid #0f172a; mask-image: linear-gradient(90deg, transparent, #000 20%); mask-origin: content-box; mask-clip: padding-box; }

Back to quick reference ↑

Treat mask images as ordered, matched layers

mask-image accepts gradients, images, and SVG mask references. Its comma-separated sources form layers, with the first painted closest to the viewer; mask-position, mask-size, mask-repeat, and mask-mode values match those layers in order and repeat when too short. Gradients normally provide alpha coverage, while luminance mode derives coverage from brightness multiplied by alpha. A failed external mask resource can hide the element, so verify URLs and cross-origin access.

Combine a centered emblem with an edge fade

.art { mask-image: url('/masks/emblem.svg'), linear-gradient(90deg, transparent, #000 15% 85%, transparent); mask-size: 8rem 8rem, 100% 100%; mask-position: center, center; mask-repeat: no-repeat; mask-mode: alpha; }

Back to quick reference ↑

Read compositing from the current layer downward

mask-composite combines each current layer with the already-composited layers below it. add forms a union, intersect keeps overlap, exclude keeps non-overlap, and subtract keeps current-layer coverage outside the destination below. The operator corresponding to the final layer has no lower layer to combine with and is ignored. Prototype layer order visually before relying on a complex stack.

Punch a circular opening from an opaque mask

.ring { mask-image: linear-gradient(#000 0 0), radial-gradient(circle, #000 0 42%, transparent 43%); mask-composite: subtract; }

Keep only the overlap of two gradients

.lens { mask-image: linear-gradient(90deg, transparent, #000), linear-gradient(transparent, #000); mask-composite: intersect; }

Back to quick reference ↑

Make the unmasked design complete and operable

Ship readable base styling before an @supports enhancement so unsupported or failed effects reveal content instead of removing it. Do not use a clip or mask to hide duplicate accessible names, confidential text, or required instructions: it changes painting, not semantic exposure. Keep focus indicators inside visible geometry, preserve sufficient contrast through fades, and avoid clipping interactive hit areas into surprising shapes.

Progressively enhance a decorative edge

.hero { border-radius: 1.5rem; overflow: hidden; }
@supports (mask-image: linear-gradient(#000, transparent)) { .hero { overflow: visible; mask-image: linear-gradient(to bottom, #000 80%, transparent); } }
.hero :focus-visible { outline: .2rem solid CanvasText; outline-offset: -.35rem; }

Back to quick reference ↑

Local code tester

Compare clipping and layered masks

Inspect a hard polygon crop, a gradient fade, and a two-layer mask with a cutout.

Runs in your browser

index.html

<link rel="stylesheet" href="styles.css">

<main>
  <article class="sample clip">
    <h2>Clip</h2>
    <p>Hard polygon edge</p>
  </article>
  <article class="sample fade">
    <h2>Mask</h2>
    <p>Soft alpha fade</p>
  </article>
  <article class="sample cutout">
    <h2>Composite</h2>
    <p>Subtracted center</p>
  </article>
</main>

styles.css

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 2rem;
  font: 1rem/1.5 system-ui;
  background: #f8fafc;
  color: #0f172a;
}
main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem;
}
.sample {
  min-block-size: 12rem;
  padding: 2rem;
  background: linear-gradient(135deg, #67e8f9, #6366f1);
  color: #fff;
}
.clip {
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
}
.fade {
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.cutout {
  mask-image: linear-gradient(#000 0 0), radial-gradient(circle, #000 0 25%, transparent 26%);
  mask-composite: subtract;
}

Preview

Sources and further reading

References

Authoritative documentation used to verify and expand this cheat sheet.

Help us improve

Found a typo or missing example?

Tell us what would make this cheat sheet clearer, more complete, or more useful.

Share feedback

Quick reference

Detailed examples

Choose clipping for edges and masking for coverage

Build hard boundaries with basic shapes or SVG

Control the geometry used for positioning and clipping

Treat mask images as ordered, matched layers

Read compositing from the current layer downward

Make the unmasked design complete and operable

Compare clipping and layered masks

More CSS cheat sheets

CSS Backgrounds, Borders, and Visual Effects Cheat Sheet

CSS Color Functions and Interpolation Cheat Sheet

CSS Colors, Themes, and Contrast Cheat Sheet

References

Found a typo or missing example?