[ @sdxc/u/effects ]

backdropSaturate

Boosts or mutes the saturation of what shows through the element's translucent background.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.backdropSaturate(1.4)`	`css({ "--ui-backdrop-saturate": "1.4", backdropFilter: "... saturate(var(--ui-backdrop-saturate, 1)) ...", WebkitBackdropFilter: "... saturate(var(--ui-backdrop-saturate, 1)) ..." })`

Examples

Basic example

Use backdropSaturate(n) to mute the colors showing through an element below 1, or intensify them above 1:

backdropSaturate(0)

backdropSaturate(2.5)

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[backdropSaturate(0), ...]}>backdropSaturate(0)</div>
	</div>
	<div mix={[...]}>
		<div mix={[backdropSaturate(2.5), ...]}>backdropSaturate(2.5)</div>
	</div>
</div>

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.backdropSaturate("2.75rem")

Applying on a state

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

u.hover(u.backdropSaturate(1.4))

Responsive design

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

u.at("md", u.backdropSaturate(1.4))

Signature

u.backdropSaturate(value?: number | (string & {}))