# fade

Fades opacity only. Overlays, backdrops, and anything where movement would distract.

## Use it

```html
data-motion="fade"
```

## What it sets

The preset only declares these. Everything else, duration and easing included, comes from the shared tokens, so overriding a token restyles every preset at once rather than one of them.

```css
[data-motion~="fade"] {
  --motion-from-opacity: 0;
}
```

## Composition

Composes with `slide-up`. Combine them with a space.

```html
data-motion="fade slide-up"
```

## Hosts

The same attribute across every host it supports. You never choose the mechanism, the host's own state attributes do.

| Host | Markup |
| --- | --- |
| radix | `<Dialog.Content data-motion="fade" />` |
| base-ui | `<Dialog.Popup data-motion="fade" />` |
| native-dialog | `<dialog data-motion="fade">` |
| native-popover | `<div popover data-motion="fade" />` |
| plain | `<div hidden data-motion="fade" />` |