Animated Mesh Gradient
Mesh gradient panel built from four large soft colour fields with slow hue drift; no WebGL, print-safe static state.
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer. Build an animated mesh-gradient background from layered radial-gradients, suitable behind a CTA or pricing header.
STACK
Target Stack
React + TypeScript + Tailwind CSS. CSS keyframes animate background-position of oversized gradient layers; filter: saturate stays constant.
LAYOUT
Layout
Container with three stacked background layers (each 180% size). Layer hues: primary, accent, warm highlight. A 4% opacity noise overlay (inline SVG feTurbulence data URI) kills banding.
COLOR TOKENS
Color Tokens
--mesh-1: 250 85% 65%; --mesh-2: 190 90% 55%; --mesh-3: 35 95% 65%; --mesh-base: 240 30% 96%.
ANIMATION
Animation
Layers pan on 26s/34s alternate loops, ±6% position. Hue-rotate drift limited to 12deg to keep brand colours recognisable. Reduced motion and print: first frame only.
RESPONSIVE
Responsive
Same composition all sizes; noise overlay scales with background-size 180px.
SAMPLE COPY
Sample Copy
Usage: CTA panels, pricing header band, empty-state headers.