Animated Gradient Background: CSS, Mesh & Interactive Shader Code

Disclosure: Scrollhaus publishes this guide. All snippets are original; browser support notes come from MDN.

Why animated gradients work

An animated gradient background gives a page atmosphere without images, video or a heavy library. Done well, it reads as light moving across a surface: slow, soft and never louder than the headline. It is also the cheapest motion you can ship, which is why AI website prompt libraries such as GetLayers sell "interactive gradient" prompts as a category of their own. You can build every one of the effects below yourself in a few lines.

Four kinds of animated gradient background

1. CSS animated gradient (linear drift)

.bg-drift {
  background: linear-gradient(120deg, #120d2b, #4b2a8f, #0f5c6e, #120d2b);
  background-size: 300% 300%;
  animation: drift 20s ease-in-out infinite;
}
@keyframes drift { 0%, 100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }
@media (prefers-reduced-motion: reduce) { .bg-drift { animation: none } }

2. Mesh gradient that actually animates its colours

Gradients cannot normally be interpolated, but registering custom properties with @property lets the browser animate the positions and colours inside them. @property is supported in all current major browsers.

@property --a { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --b { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
.bg-mesh {
  background:
    radial-gradient(40% 50% at var(--a) 30%, #ff7ab655, transparent 70%),
    radial-gradient(45% 55% at var(--b) 70%, #6c8cff55, transparent 70%),
    radial-gradient(60% 60% at 50% 50%, #2ce0c033, transparent 70%),
    #0c0a1c;
  animation: mesh 16s ease-in-out infinite alternate;
}
@keyframes mesh { to { --a: 75%; --b: 25%; } }

3. Conic glow for cards and buttons

@property --turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.glow { border: 1px solid transparent; border-radius: 16px;
  background: linear-gradient(#111,#111) padding-box, conic-gradient(from var(--turn), #c3a1ff, #5ee7df, #c3a1ff) border-box;
  animation: spin 6s linear infinite; }
@keyframes spin { to { --turn: 360deg } }

The CSS border glow guide has more variations.

4. Interactive gradient with a tiny shader

When you want colour that flows like liquid and bends toward the pointer, a fragment shader is lighter than it sounds. No library is needed:

precision mediump float;
uniform vec2 uRes; uniform float uTime; uniform vec2 uMouse;
void main() {
  vec2 uv = gl_FragCoord.xy / uRes;
  float d = distance(uv, uMouse);
  float w = sin(uv.x * 3.0 + uTime * 0.25) + cos(uv.y * 4.0 - uTime * 0.2) - d * 1.5;
  vec3 col = mix(vec3(0.07,0.05,0.17), vec3(0.42,0.33,0.95), 0.5 + 0.5 * sin(w));
  col = mix(col, vec3(0.18,0.85,0.78), smoothstep(0.6, 0.0, d) * 0.35);
  gl_FragColor = vec4(col, 1.0);
}

Draw it on one full-screen triangle, cap the pixel ratio at 1.5, and pause when the tab is hidden. Our Next.js animated background guide shows how to load a shader without blocking the page.

Design rules for gradient backgrounds

• Slow is premium. Cycles of 15–30 seconds feel ambient; under 5 seconds feels like a loading state.
• Two hues and a neutral. More colours turn muddy where they mix.
• Check contrast on the brightest frame, not the first one.
• Add grain. A 2–3% noise overlay hides colour banding on large screens.
• Honour reduced motion and pause loops longer than five seconds, as WCAG 2.2.2 asks.

Use them in AI builders

Each snippet above pastes straight into Lovable, Bolt, Cursor or Claude Code. For full pages built around a gradient or colour current, preview KOI LAB (free) and FACETTE, or browse the Scrollhaus animated backgrounds library. See also animated backgrounds for websites.

Explore animated website templates at Scrollhaus →

Need help with a template, account, or project? Email admin@scrollhaus.ai.