# backdropDropShadow

> Shadows the shapes showing through the host.

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

Shadows the shapes showing through the host. The shadow shows only where the
backdrop is transparent, so the shapes need their own backdrop root (a parent with
`willChange("filter")`); over an opaque page it paints nothing. `u.transparencySafe()` gates it.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.backdropDropShadow()` | `css({ "--ui-backdrop-drop-shadow": "calc(var(--ui-spacing, 0.25rem) * 0) calc(var(--ui-spacing, 0.25rem) * 1) calc(var(--ui-spacing, 0.25rem) * 2) rgb(0 0 0 / 0.15)", backdropFilter: "... drop-shadow(var(--ui-backdrop-drop-shadow, 0 0 0 transparent))" })` |
| `u.backdropDropShadow({ y: "2px", blur: "4px", color: "brand" })` | `css({ "--ui-backdrop-drop-shadow": "calc(var(--ui-spacing, 0.25rem) * 0) 2px 4px var(--ui-brand-border)", backdropFilter: "... drop-shadow(var(--ui-backdrop-drop-shadow, 0 0 0 transparent))" })` |

## Examples

### Basic example

Use `backdropDropShadow()` to shadow the shapes showing through an element. It traces what is painted inside the nearest backdrop root, like a parent with `willChange("filter")`:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[zstack(), willChange("filter")]}>
			<svg viewBox="0 0 24 24" mix={[...]}>
				<path d="M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z" />
			</svg>
			<div mix={[backdropDropShadow(), ...]} />
		</div>
		<span mix={[...]}>default</span>
	</div>
	<div mix={[...]}>
		<div mix={[zstack(), willChange("filter")]}>
			<svg viewBox="0 0 24 24" mix={[...]}>
				<path d="M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z" />
			</svg>
			<div mix={[backdropDropShadow({ x: 2, y: 2, blur: 1 }), ...]} />
		</div>
		<span mix={[...]}>x: 2, y: 2, blur: 1</span>
	</div>
</div>
```

### Changing the color

Pass a theme `color` to tint the traced shadow, like `color: "brand"`:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[zstack(), willChange("filter")]}>
			<svg viewBox="0 0 24 24" mix={[...]}>
				<path d="M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z" />
			</svg>
			<div mix={[backdropDropShadow({ y: 2, blur: 2, color: "brand" }), ...]} />
		</div>
		<span mix={[...]}>color: "brand"</span>
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.backdropDropShadow())
```

## Responsive design

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

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

## Customizing your theme

### Customizing spacing

Every numeric step multiplies `--ui-spacing`, so redefining it rescales every spacing and sizing utility at once:

```css
:root {
	--ui-spacing: 0.25rem;
}
```

Every call that names the step now reads the new value:

```ts
p(4)
```

### Customizing colors

Define a palette as `--ui-color-{name}-{50..950}` and map a tone onto it with the `--ui-{tone}-*` variables, the way `theme.css` maps the built-in ones:

```css
:root {
	--ui-color-info-50: oklch(0.97 0.02 230);
	--ui-color-info-200: oklch(0.88 0.06 230);
	--ui-color-info-500: oklch(0.62 0.16 230);
	--ui-color-info-600: oklch(0.52 0.18 230);
	--ui-color-info-900: oklch(0.3 0.1 230);

	--ui-info-bg-tint: var(--ui-color-info-50);
	--ui-info-bg-solid: var(--ui-color-info-600);
	--ui-info-fg: var(--ui-color-info-600);
	--ui-info-fg-muted: var(--ui-color-info-500);
	--ui-info-fg-emphasis: var(--ui-color-info-900);
	--ui-info-fg-on-solid: white;
	--ui-info-border: var(--ui-color-info-200);
	--ui-info-border-strong: var(--ui-color-info-600);
	--ui-info-ring: var(--ui-color-info-500);
}
```

```ts
declare module "@sdxc/u" {
	interface ColorPalettes {
		info: true;
	}
	interface SemanticTones {
		info: true;
	}
}
```

The new name is then accepted wherever the scale is:

```ts
bg("info")
```

## Signature

```ts
u.backdropDropShadow(options?: BackdropDropShadowOptions)
```