[ @sdxc/u/effects ]

backdropGrayscale

Desaturates the backdrop toward grey (1 fully, 0 untouched) so a coloured overlay reads as the only hue in the area.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.backdropGrayscale()`	`css({ "--ui-backdrop-grayscale": "1", backdropFilter: "... grayscale(var(--ui-backdrop-grayscale, 0)) ...", WebkitBackdropFilter: "... grayscale(var(--ui-backdrop-grayscale, 0)) ..." })`
`u.transparencySafe(u.backdropGrayscale(0.5))`	`css({ "@media (prefers-reduced-transparency: no-preference)": { "--ui-backdrop-grayscale": "0.5", backdropFilter: "...", WebkitBackdropFilter: "..." } })`

Examples

Basic example

Use backdropGrayscale(n) to desaturate what shows through an element, where backdropGrayscale() with no argument is fully grey:

backdropGrayscale(0.5)

backdropGrayscale()

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[backdropGrayscale(0.5), ...]}>backdropGrayscale(0.5)</div>
	</div>
	<div mix={[...]}>
		<div mix={[backdropGrayscale(), ...]}>backdropGrayscale()</div>
	</div>
</div>

Applying on a state

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

u.hover(u.backdropGrayscale())

Responsive design

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

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

Signature

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