[ @sdxc/u/effects ]

backdropHueRotate

Rotates the backdrop's hue while preserving lightness and saturation, so a busy backdrop pulls toward one brand hue with its light/dark structure intact.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.backdropHueRotate()`	`css({ "--ui-backdrop-hue-rotate": "90deg", backdropFilter: "... hue-rotate(var(--ui-backdrop-hue-rotate, 0deg)) ...", WebkitBackdropFilter: "... hue-rotate(var(--ui-backdrop-hue-rotate, 0deg)) ..." })`
`u.transparencySafe(u.backdropHueRotate("0.5turn"))`	`css({ "@media (prefers-reduced-transparency: no-preference)": { "--ui-backdrop-hue-rotate": "0.5turn", backdropFilter: "...", WebkitBackdropFilter: "..." } })`

Examples

Basic example

Use backdropHueRotate(n) to rotate the colors showing through an element by n degrees:

backdropHueRotate(90)

backdropHueRotate(180)

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[backdropHueRotate(90), ...]}>backdropHueRotate(90)</div>
	</div>
	<div mix={[...]}>
		<div mix={[backdropHueRotate(180), ...]}>backdropHueRotate(180)</div>
	</div>
</div>

Using other angle units

Pass a string to use any CSS angle unit, like backdropHueRotate("0.5turn"):

backdropHueRotate("0.5turn")

backdropHueRotate("-1rad")

<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[backdropHueRotate("0.5turn"), ...]}>backdropHueRotate("0.5turn")</div>
	</div>
	<div mix={[...]}>
		<div mix={[backdropHueRotate("-1rad"), ...]}>backdropHueRotate("-1rad")</div>
	</div>
</div>

Applying on a state

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

u.hover(u.backdropHueRotate())

Responsive design

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

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

Signature

u.backdropHueRotate(value?: AngleValue)