THE WEB IS
A MATERIAL.

THE OPEN STUDIO / GRAPHICS

Clipping, masking or filtering?

Visual effects can be expressive without pre-rendered assets. But every effect has a rendering model, an accessibility consequence and a cost.

Interactive · CompositingPlain HTML routeOpen source

Not every visual change is the same operation.

Sometimes you need to show only part of a shape, sometimes to soften its transparency, and sometimes to change the pixels after they're painted. CSS offers different tools because the operations are genuinely different.

clip-path defines a visible region: inside shows, outside doesn't. Masks can vary opacity continuously using alpha or luminance. Filters modify the rendered image, often with operations such as blur, brightness or contrast. Blend modes combine painted pixels with what is behind them.

Make a shape—and make it expensive.

Experiment with the visible circle and the blur. The background is deliberately patterned so you can see how mix-blend-mode: multiply depends on the content below it. Try extreme blur values, but remember: real costs vary by browser, device, area and how often the effect changes.

LIVE EXPERIMENT / EFFECTSChange one variable at a time
CSS THE BROWSER IS USING

These controls update CSS custom properties; the example's HTML stays the same.

Different stages, different tradeoffs.

.shape {
  clip-path: circle(50% at center);
  filter: blur(4px);
  mix-blend-mode: multiply;
}
.soft-edge {
  mask-image: radial-gradient(circle, black 50%, transparent 75%);
}
.frosted-surface {
  backdrop-filter: blur(10px);
}

A simple clip can be preferable to a mask when you only need a hard shape. A mask is more expressive when partial transparency matters. filter affects an element's rendering; backdrop-filter affects the backdrop visible through it. Blend modes respond to surrounding painted content and can create or interact with stacking contexts.

None of these automatically produces an actual 3D scene. They change how two-dimensional surfaces are drawn and combined. The next experiment explores perspective and spatial transforms.

Use the simplest operation that expresses the intent.

  • Use border-radius for simple rounded corners before introducing complex clipping.
  • Use clip-path for a geometric cutout.
  • Use masks when you need a soft reveal or image-based opacity.
  • Use filters and blending intentionally; avoid layering many huge blur regions simply for decoration.
  • Don't depend on a filter to make essential information understandable.

Effects must be optional to understand.

An icon that is recognizable only through a subtle blur or color change may fail for people with low vision, color-vision differences or high-contrast settings. Keep labels and boundaries visible. In forced-colors mode, decorative gradients and effects may be removed or adjusted by the browser.

For performance, large blurs, masks and backdrop filters may require intermediate surfaces, offscreen rendering or additional compositing. They aren't automatically GPU-fast just because CSS is declarative. Profile the target devices, especially during animation or scrolling.

Make the expensive version, then simplify.

Break it

Add multiple backdrop blurs to large overlapping panels and animate them. What happens to smoothness on a slower device? Is the effect essential?

Build it

Create a card with a soft edge and a masked illustration. Then build a second version with a simpler clip or no effect. Compare appearance, readability and performance. Visit the reimagined atmospheric layering experiment for historical inspiration.

Go a little deeper.