mix-blend-mode for Layer Blending

mix-blend-mode controls how an element's pixels blend with the pixels of underlying elements — similar to Photoshop layer blend modes. It affects the entire element including its background.

normal is the default — no blending. The top element covers whatever is beneath it.

multiply darkens by multiplying pixel values. White becomes transparent; black stays black. Great for placing dark-toned images over colored backgrounds.

screen is the inverse of multiply — brightens. Black becomes transparent; white stays white. Good for light effects and glows.

overlay combines multiply and screen. Dark areas darken; light areas lighten. Increases contrast while preserving midtones.

difference subtracts colors. Identical colors produce black; opposite colors produce white. Creates psychedelic, high-contrast effects.

hard-light applies multiply or screen depending on the source color. soft-light is a softer version with less contrast boost.

These modes blend only certain color properties:

• hue — takes hue from top, saturation/lightness from below
• saturation — takes saturation from top
• color — takes hue and saturation from top, lightness from below
• luminosity — takes lightness from top

Create duotone images by layering a colored element with mix-blend-mode: color:

Text that appears inverted against any background:

mix-blend-mode blends with elements in the same stacking context. The isolation: isolate property on a parent creates a new stacking context, preventing blend modes from affecting elements outside the isolated group.

mix-blend-mode blends element pixels with underlying content. Key modes: multiply (darkens, white → transparent), screen (brightens, black → transparent), overlay (boost contrast), difference (subtraction), color (recolor images). Use isolation: isolate on parent to contain blend scope.