# blur

> Applies a blur from the blur scale by writing only its own `--ui-filter-blur` custom property, so it combines with `u.grayscale()`, `u.brightness()`, and every other filter utility in one composite `filter`.

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

Applies a blur from the blur scale by writing only its own
`--ui-filter-blur` custom property, so it combines with `u.grayscale()`,
`u.brightness()`, and every other filter utility in one composite `filter`.

## Quick reference

Every documented call, beside the CSS it emits.

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

## Examples

### Basic example

Use `blur("sm")`, `blur("md")` or `blur("lg")` to blur an element by a step of the blur scale:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<img mix={[blur("sm"), ...]} src={...} alt="" />
		<span mix={[...]}>blur("sm")</span>
	</div>
	<div mix={[...]}>
		<img mix={[blur("md"), ...]} src={...} alt="" />
		<span mix={[...]}>blur("md")</span>
	</div>
	<div mix={[...]}>
		<img mix={[blur("lg"), ...]} src={...} alt="" />
		<span mix={[...]}>blur("lg")</span>
	</div>
</div>
```

### Using a custom value

Pass any CSS length, like `blur("2px")`, when no step of the scale fits:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<img mix={[blur("1px"), ...]} src={...} alt="" />
		<span mix={[...]}>blur("1px")</span>
	</div>
	<div mix={[...]}>
		<img mix={[blur("2px"), ...]} src={...} alt="" />
		<span mix={[...]}>blur("2px")</span>
	</div>
	<div mix={[...]}>
		<img mix={[blur("40px"), ...]} src={...} alt="" />
		<span mix={[...]}>blur("40px")</span>
	</div>
</div>
```

### Removing the blur on hover

Override the blur with `hover(blur("0px"))` to reveal the image when it's hovered. Hover the photograph:

```tsx
<img
	mix={[blur("lg"), hover(blur("0px")), transition("filter", { duration: 300 }), ...]}
	src={...}
	alt=""
/>
```

## Applying on a state

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

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

## Responsive design

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

```ts
u.at("md", u.blur("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
blur("xl")
```

## Signature

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