[ @sdxc/u/effects ]

backdropContrast

Pushes the backdrop away from (above 1) or toward (below 1) mid-grey; flattening it to a uniform tone keeps overlaid text legible.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.backdropContrast()`	`css({ "--ui-backdrop-contrast": "1.25", backdropFilter: "... contrast(var(--ui-backdrop-contrast, 1)) ...", WebkitBackdropFilter: "... contrast(var(--ui-backdrop-contrast, 1)) ..." })`
`u.transparencySafe(u.backdropContrast(0.75))`	`css({ "@media (prefers-reduced-transparency: no-preference)": { "--ui-backdrop-contrast": "0.75", backdropFilter: "...", WebkitBackdropFilter: "..." } })`

Examples

Basic example

Use backdropContrast(n) to flatten what shows through an element toward grey below 1, or push it apart above 1:

backdropContrast(0.4)

backdropContrast(2)

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[backdropContrast(0.4), ...]}>backdropContrast(0.4)</div>
	</div>
	<div mix={[...]}>
		<div mix={[backdropContrast(2), ...]}>backdropContrast(2)</div>
	</div>
</div>

Applying on a state

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

u.hover(u.backdropContrast())

Responsive design

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

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

Signature

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