AMBIENT EFFECT

Gradient drift.

A background color field moves slowly behind content.

See the movement

Repeats while playing

Duration 6.00s

Playback starts only when you request it. Stop returns to the still illustration.

What it does

A slow background shift adds atmosphere without moving text or controls. Use restrained contrast so the foreground stays readable throughout the entire cycle.

Timing curveease-in-out

Default duration6000ms

RepetitionWhile the state is active

Make the motion useful

Choose an effect that supports the component’s purpose. Keep the final state clear, preserve focus and reading order, and pair important feedback with a visible message.

CSS animation reference

TAKE THE MOVEMENT WITH YOU

Describe the effect.

Copy this into your next coding conversation, or pair it with a dictionary component.

Gradient drift: A background color field moves slowly behind content.
Animate the position of a soft, oversized gradient behind a static foreground. Use a slow cycle, preserve readable contrast at every point, and keep the background still when reduced motion is preferred.
Timing: 6000ms; easing: ease-in-out; repeat only while the relevant state is active.
Accessibility: respect prefers-reduced-motion with a static state or brief opacity-only change, and never rely on motion alone to convey meaning.

Find a component

For reduced motion, use a static state or a brief opacity change. Animation should never be required to understand the component.

See the movement

What it does

Make the motion useful

In the same family

Float