# backdropBlur

> Blurs the backdrop by a step from the blur scale, whatever the user's transparency preference; `u.translucent()` is the gated variant with a solid fallback.

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

Blurs the backdrop by a step from the blur scale, whatever the user's
transparency preference; `u.translucent()` is the gated variant with a solid
fallback. Sibling utilities combine through the shared composite filter.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.backdropBlur("lg")` | `css({ "--ui-backdrop-blur": "var(--ui-blur-lg, 24px)", backdropFilter: "blur(var(--ui-backdrop-blur, 0px)) brightness(var(--ui-backdrop-brightness, 1)) ...", WebkitBackdropFilter: "blur(var(--ui-backdrop-blur, 0px)) brightness(var(--ui-backdrop-brightness, 1)) ..." })` |

## Examples

### Basic example

Use `backdropBlur("sm")`, `backdropBlur("md")` or `backdropBlur("lg")` to blur whatever shows through an element:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[backdropBlur("sm"), ...]}>backdropBlur("sm")</div>
	</div>
	<div mix={[...]}>
		<div mix={[backdropBlur("md"), ...]}>backdropBlur("md")</div>
	</div>
	<div mix={[...]}>
		<div mix={[backdropBlur("lg"), ...]}>backdropBlur("lg")</div>
	</div>
</div>
```

### Frosted glass

Every backdrop utility writes its own part of one `backdrop-filter`, so `backdropBlur()` stacks with `backdropSaturate()` and `backdropBrightness()` into frosted glass:

```tsx
<div mix={[...]}>
	<div mix={[backdropBlur("md"), backdropSaturate(1.8), backdropBrightness(1.15), ...]}>
		frosted glass
	</div>
</div>
```

### Respecting reduced transparency

Wrap it in `transparencySafe()` to blur the backdrop only for readers whose system allows transparency effects:

```tsx
<div mix={[...]}>
	<div mix={[transparencySafe(backdropBlur("lg")), ...]}>transparencySafe(…)</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.backdropBlur("lg"))
```

## Responsive design

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

```ts
u.at("md", u.backdropBlur("lg"))
```

## Customizing your theme

### Customizing blur

Redefine a `--ui-blur-*` variable to change a step, or declare a new one:

```css
:root {
	--ui-blur-xl: 24px;
}
```

```ts
declare module "@sdxc/u" {
	interface Blurs {
		xl: true;
	}
}
```

The new name is then accepted wherever the scale is:

```ts
backdropBlur("xl")
```

## Signature

```ts
u.backdropBlur(name?: BlurName | (string & {}))
```