mix-blend-mode

Utilities for controlling how an element should blend with the background.

Examples

Basic example

Use utilities like mix-blend-overlay and mix-blend-soft-light to control how an element's content and background is blended with other content in the same stacking context:

Isolating blending

Use the isolate utility on the parent element to create a new stacking context and prevent blending with content behind it:

Responsive design