Gradient Drift
No library Beginner
The card header runs a full-spectrum rainbow gradient that slowly drifts left-to-right in a continuous loop — an ambient living colour effect. Pure CSS, no dependencies.
The card header runs a full-spectrum rainbow gradient that slowly drifts left-to-right in a continuous loop — an ambient living colour effect. Pure CSS, no dependencies.
Goal: Create a "Gradient Drift" card animation.
Visual behavior: The card header area has a full-spectrum rainbow gradient (red → orange → yellow → green → blue → violet) that continuously drifts horizontally in a smooth loop over ~8 seconds. The gradient is oversized (500% width) and background-position animates from 0% 50% to 100% 50% and back.
Technique: A keyframe animates background-position on the header element. The gradient uses background-size: 500% 500% and linear-gradient(270deg, ...) with 6 hue stops. Duration ~8s, timing ease, infinite.
Accessibility: Animation paused under prefers-reduced-motion; gradient shown at a fixed position.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.