# backdropSaturate

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

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

Boosts or mutes the saturation of what shows through the element's
translucent background. Composes with every other backdrop utility; wrap in
`u.transparencySafe()` for a solid fallback.

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

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

```ts
u.backdropSaturate("2.75rem")
```

## Applying on a state

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

```ts
u.hover(u.backdropSaturate(1.4))
```

## Responsive design

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

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

## Signature

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