[ @sdxc/u/effects ]

brightness

Applies a filter: brightness(...), scaling every pixel's lightness.

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

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

Quick reference

Every documented call, beside the CSS it emits.

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

Examples

Basic example

Use brightness(n) to scale an element's lightness, where values below 1 darken it and values above 1 brighten it:

brightness(0.5)

brightness(1)

brightness(1.5)

<div mix={[...]}>
	<div mix={[...]}>
		<img mix={[brightness(0.5), ...]} src={...} alt="" />
		<span mix={[...]}>brightness(0.5)</span>
	</div>
	<div mix={[...]}>
		<img mix={[brightness(1), ...]} src={...} alt="" />
		<span mix={[...]}>brightness(1)</span>
	</div>
	<div mix={[...]}>
		<img mix={[brightness(1.5), ...]} src={...} alt="" />
		<span mix={[...]}>brightness(1.5)</span>
	</div>
</div>

Brightening on hover

Combine it with hover() and transition() to light up a clickable image. Hover the photograph:

<a href="/gallery/landscape">
	<img
		mix={[hover(brightness(1.25)), transition("filter"), ...]}
		src={...}
		alt="Landscape"
	/>
</a>

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.brightness("2.75rem")

Applying on a state

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

u.hover(u.brightness(1.1))

Responsive design

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

u.at("md", u.brightness(1.1))

Signature

u.brightness(value?: number | (string & {}))