[ @sdxc/u/effects ]

filterOpacity

Applies a filter: opacity(...), fading the element inside the filter pipeline so one pass carries the fade along with any blur() or grayscale().

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.filterOpacity()`	`css({ "--ui-filter-opacity": "0.5", filter: "... opacity(var(--ui-filter-opacity, 1)) ..." })`
`u.filterOpacity("25%")`	`css({ "--ui-filter-opacity": "25%", filter: "... opacity(var(--ui-filter-opacity, 1)) ..." })`

Examples

Basic example

Use filterOpacity(n) to fade an element inside its filter, taking a value from 0 to 1:

filterOpacity(0.25)

filterOpacity(0.5)

filterOpacity(0.75)

<div mix={[...]}>
	<div mix={[...]}>
		<img mix={[filterOpacity(0.25), ...]} src={...} alt="" />
		<span mix={[...]}>filterOpacity(0.25)</span>
	</div>
	<div mix={[...]}>
		<img mix={[filterOpacity(0.5), ...]} src={...} alt="" />
		<span mix={[...]}>filterOpacity(0.5)</span>
	</div>
	<div mix={[...]}>
		<img mix={[filterOpacity(0.75), ...]} src={...} alt="" />
		<span mix={[...]}>filterOpacity(0.75)</span>
	</div>
</div>

Combining with other filters

Because it's part of the same filter, it stacks with grayscale(), blur() and the rest; a percentage string like filterOpacity("40%") works too:

<img
	mix={[filterOpacity("40%"), grayscale(), blur("sm"), ...]}
	src={...}
	alt=""
/>

Applying on a state

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

u.hover(u.filterOpacity())

Responsive design

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

u.at("md", u.filterOpacity())

Signature

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