# dropShadow

> Applies `filter: drop-shadow(...)`, shadowing the element's rendered shape — a PNG's alpha channel, an SVG icon's outline — with offsets and a blur radius.

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

Applies `filter: drop-shadow(...)`, shadowing the element's rendered shape — a
PNG's alpha channel, an SVG icon's outline — with offsets and a blur radius.
Composes with every filter utility through the shared composite `filter`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.dropShadow()` | `css({ "--ui-filter-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)", filter: "... drop-shadow(var(--ui-filter-drop-shadow, 0 0 0 transparent))" })` |
| `u.dropShadow({ y: "2px", blur: "4px", color: "brand" })` | `css({ "--ui-filter-drop-shadow": "calc(var(--ui-spacing, 0.25rem) * 0) 2px 4px var(--ui-brand-border)", filter: "... drop-shadow(var(--ui-filter-drop-shadow, 0 0 0 transparent))" })` |

## Examples

### Basic example

Use `dropShadow()` to shadow the shape an element draws — an SVG icon or a transparent image — and pass `y` and `blur` to make it deeper:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<svg viewBox="0 0 24 24" mix={[dropShadow(), ...]}>
			<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>
		<span mix={[...]}>default</span>
	</div>
	<div mix={[...]}>
		<svg viewBox="0 0 24 24" mix={[dropShadow({ y: 2, blur: 3 }), ...]}>
			<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>
		<span mix={[...]}>y: 2, blur: 3</span>
	</div>
	<div mix={[...]}>
		<svg viewBox="0 0 24 24" mix={[dropShadow({ y: 4, blur: 6 }), ...]}>
			<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>
		<span mix={[...]}>y: 4, blur: 6</span>
	</div>
</div>
```

### Setting the offset and color

Pass `x`, `y`, `blur` and a theme `color` to shape the shadow, from a hard offset to a soft glow:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<svg
			viewBox="0 0 24 24"
			mix={[dropShadow({ x: 1, y: 1, blur: 0, color: "neutral.strong" }), ...]}
		>
			<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>
		<span mix={[...]}>hard offset</span>
	</div>
	<div mix={[...]}>
		<svg
			viewBox="0 0 24 24"
			mix={[dropShadow({ y: 0, blur: 3, color: "brand.solid" }), ...]}
		>
			<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>
		<span mix={[...]}>glow</span>
	</div>
</div>
```

### Compared to a box shadow

`shadow()` shadows the element's rectangular box, while `dropShadow()` follows what is actually drawn:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<svg viewBox="0 0 24 24" mix={[shadow("lg"), ...]}>
			<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>
		<span mix={[...]}>shadow("lg")</span>
	</div>
	<div mix={[...]}>
		<svg viewBox="0 0 24 24" mix={[dropShadow({ y: 2, blur: 3 }), ...]}>
			<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>
		<span mix={[...]}>dropShadow()</span>
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.dropShadow())
```

## Responsive design

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

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

## 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.dropShadow(options?: DropShadowOptions)
```