# filterOpacity

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

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

Applies a `filter: opacity(...)`, fading the element inside the filter
pipeline so one pass carries the fade along with any `blur()` or
`grayscale()`. Takes CSS's native `0`–`1` range, or a percentage string.

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

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

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

```ts
u.hover(u.filterOpacity())
```

## Responsive design

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

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

## Signature

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