# backdrop

> Applies the given utilities to a top-layer element's `::backdrop`, the layer the browser paints behind a `<dialog>` or popover to dim the page with no overlay, z-index, or scroll container; pairs with `u.open()`.

```ts
import { backdrop } from "@sdxc/u/state";
```

Applies the given utilities to a top-layer element's `::backdrop`, the
layer the browser paints behind a `<dialog>` or popover to dim the page
with no overlay, z-index, or scroll container; pairs with `u.open()`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.backdrop(u.bg("neutral.solid"))` | `css({ "&::backdrop": { backgroundColor: "..." } })` |

## Examples

### Basic example

Wrap utilities in `backdrop()` to paint the layer behind a modal dialog. Click the button to open the dialog:

```tsx
<div>
	<button
		type="button"
		commandfor="backdrop-basic"
		command="show-modal"
		mix={[bg("brand.solid"), fg("brand.onSolid"), cursor("pointer"), ...]}
	>
		Delete project
	</button>
	<dialog id="backdrop-basic" mix={[backdrop([bg("neutral.solid"), opacity(60)]), ...]}>
		<div mix={[vstack({ gap: 3 })]}>
			<p mix={[text("base"), weight("semibold")]}>Delete this project?</p>
			<button
				type="button"
				commandfor="backdrop-basic"
				command="close"
				mix={[bg("neutral.tint"), fg("neutral.emphasis"), cursor("pointer"), ...]}
			>
				Cancel
			</button>
		</div>
	</dialog>
</div>
```

### Blurring the page

Put `backdropBlur()` inside `backdrop()` to frost the page behind the dialog. Open it to see the blur:

```tsx
<div>
	<button
		type="button"
		commandfor="backdrop-blurred"
		command="show-modal"
		mix={[bg("brand.solid"), fg("brand.onSolid"), cursor("pointer"), ...]}
	>
		Open settings
	</button>
	<dialog
		id="backdrop-blurred"
		mix={[
			backdrop([bg("transparent"), backdropBlur("md"), backdropBrightness(0.8)]),
			...,
		]}
	>
		<div mix={[vstack({ gap: 3 })]}>
			<p mix={[text("base"), weight("semibold")]}>Settings</p>
			<button
				type="button"
				commandfor="backdrop-blurred"
				command="close"
				mix={[bg("neutral.tint"), fg("neutral.emphasis"), cursor("pointer"), ...]}
			>
				Done
			</button>
		</div>
	</dialog>
</div>
```

## Responsive design

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

```ts
u.at("md", u.backdrop(u.bg("neutral.solid")))
```

## Signature

```ts
u.backdrop(input: UtilityInput<Node>)
```