Gradient shift
The hero card uses an oversized gradient and animates background-position so the color field slowly drifts behind the headline.
Release notes
Shipped: container queries polish, faster cold start, and this ambient header treatment.
Widely Supported
Quick implementation
@keyframes gradient-shift-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.gradient-shift-card {
background: linear-gradient(120deg, …);
background-size: 240% 240%;
animation: gradient-shift-move 14s ease-in-out infinite alternate;
}Prompt this to your LLM
Hero panels and promo strips.
You are styling a card with a slow “living” gradient.
Goal: linear-gradient background larger than the box; animate background-position horizontally (0% → 100%) over ~12–18s, ease-in-out, alternate infinite.
Constraints:
- prefers-reduced-motion: freeze at a mid position and remove animation.
- Keep text readable (shadow or overlay if needed).
Return CSS.Why this matters in 2026
Ambient motion signals freshness without stealing focus from copy—common on marketing heroes and changelog highlights.
The logic
Oversizing the gradient and animating position avoids repainting separate layers; it stays a single background paint with shifting coordinates.
Accessibility & performance
Long periods and reduced-motion fallbacks keep vestibular risk low; avoid animating text color alongside position.