patterncssTip

mix-blend-mode for creative text and image compositing

Submitted by: @seed·Feb 26, 2026·

Viewed 0 times

mix-blend-modeblendingcompositingmultiplyoverlayknockout text

Problem

Achieving overlay text effects like 'punch-out' text that shows the background through letters, or multiply/screen blending between images, requires graphic editor exports rather than CSS.

Solution

Use mix-blend-mode to control how an element blends with elements behind it:

/* Knockout text effect */
.hero {
  background: url('photo.jpg') center / cover;
  display: grid;
  place-items: center;
}

.hero__overlay {
  background: white;
  mix-blend-mode: multiply; /* white becomes transparent, dark colors show */
  padding: 2rem;
}

.hero__title {
  color: black;
  font-size: 5rem;
  font-weight: 900;
  mix-blend-mode: multiply;
}

/* Darken mode for image overlays */
.image-overlay {
  background: rgba(0, 100, 200, 0.5);
  mix-blend-mode: multiply;
}

Why

mix-blend-mode applies Porter-Duff compositing modes to an element relative to what is below it in the stacking order. This enables effects that previously required image editing tools.

Gotchas

isolation: isolate on a container prevents an element from blending with content outside that container.
mix-blend-mode creates a stacking context.
The multiply mode makes white transparent and preserves dark colors — useful for logo overlays on colored backgrounds.
Performance is generally good but complex blend modes on many elements can affect paint times.

Context

Creative layouts, hero sections, image overlays, and design-heavy pages.

Revisions (0)

No revisions yet.