# opacity

> Applies opacity from a 0-100 integer.

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

Applies opacity from a 0-100 integer. Sets the `opacity` property, which
flattens the element and all of its descendants into one group and fades
that group as a whole.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.opacity(50)` | `css({ opacity: 0.5 })` |

## Examples

### Basic example

Use `opacity(n)` with a value from `0` to `100` to make an element and everything inside it see-through:

```tsx
<div mix={[...]}>
	<div mix={[opacity(100), ...]}>opacity(100)</div>
	<div mix={[opacity(75), ...]}>opacity(75)</div>
	<div mix={[opacity(50), ...]}>opacity(50)</div>
	<div mix={[opacity(25), ...]}>opacity(25)</div>
</div>
```

### Fading disabled controls

Combine it with `disabled()` to fade a control while it can't be used:

```tsx
<div mix={[...]}>
	<button type="button" mix={[disabled(opacity(50)), ...]}>
		Save
	</button>
	<button type="button" disabled mix={[disabled(opacity(50)), ...]}>
		Save
	</button>
</div>
```

## Using a custom value

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

```ts
u.opacity("2.75rem")
```

## Applying on a state

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

```ts
u.hover(u.opacity(50))
```

## Responsive design

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

```ts
u.at("md", u.opacity(50))
```

## Signature

```ts
u.opacity(value: number)
```