[ @sdxc/u/effects ]

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.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

blur("sm")

blur("md")

blur("lg")

<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:

blur("1px")

blur("2px")

blur("40px")

<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:

<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.

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

Responsive design

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

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:

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

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

The new name is then accepted wherever the scale is:

blur("xl")

Signature

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