# 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.

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

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. Needs a partly transparent host; `u.transparencySafe()` gates it.

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

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

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

```ts
u.hover(u.backdropHueRotate())
```

## Responsive design

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

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

## Signature

```ts
u.backdropHueRotate(value?: AngleValue)
```