KQ-208 · GRADIENT/DRIFT

Gradient Drift

An ambient backdrop of soft gradient blobs that drift and breathe past each other — pure CSS and transforms, no canvas or WebGL. Each blob follows its own slow mirrored loop at a different tempo, so the field never visibly repeats, and heavy blur melts them into a single wash behind your content.

KQ-208 · GRADIENT/DRIFT

AMBIENT

A quiet, drifting wash

Backdrop CSS-only, no canvas

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/gradient-drift

Props

PropTypeDefaultDescription
heightnumberStage height in px when standalone.
childrenReactNodeContent rendered above the wash.