# mix-blend-mode

> Blends the element with the content painted behind it.

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

Blends the element with the content painted behind it. Any value but
`normal` makes the element its own stacking context, and blending stops at
the nearest one — put `u.isolate()` on the ancestor that should bound it.

## 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"`:

```tsx
<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:

```tsx
<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.

```ts
u.hover(u.mixBlendMode())
```

## Responsive design

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

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

## Signature

```ts
u.mixBlendMode(value?: MixBlendModeValue)
```