[ @sdxc/u/effects ]

mix-blend-mode

Blends the element with the content painted behind it.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { mixBlendMode } from "@sdxc/u/effects";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.mixBlendMode()`	`css({ mixBlendMode: "multiply" })`
`u.mixBlendMode("plus-lighter")`	`css({ mixBlendMode: "plus-lighter" })`

Examples

Basic example

Use mixBlendMode(mode) to blend an element with the content behind it, like "multiply", "screen" or "overlay":

multiply

screen

overlay

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[mixBlendMode("multiply"), ...]}>multiply</div>
	</div>
	<div mix={[...]}>
		<div mix={[mixBlendMode("screen"), ...]}>screen</div>
	</div>
	<div mix={[...]}>
		<div mix={[mixBlendMode("overlay"), ...]}>overlay</div>
	</div>
</div>

Isolating the blend

Put isolate() on the parent so the elements blend with each other and leave the page behind them alone:

<div mix={[isolate(), hstack({ justify: "center" })]}>
	<div mix={[mixBlendMode("multiply"), bg("color.danger.400"), circle(), is(24)]} />
	<div mix={[mixBlendMode("multiply"), bg("color.warning.400"), circle(), is(24), mis(-8)]} />
	<div mix={[mixBlendMode("multiply"), bg("color.brand.400"), circle(), is(24), mis(-8)]} />
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.mixBlendMode())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.mixBlendMode())

Signature

u.mixBlendMode(value?: MixBlendModeValue)