Guides · · Maxwell Prehoda
11 Animated Gradient Examples, From Stripe's WebGL Mesh to One Line of CSS
There are four ways to animate a gradient, and every example below uses one of them: pan an oversized gradient with background-position (the classic), animate registered custom properties with @property so the colours or angle themselves tween, layer and blur shapes so they read as a mesh, or render the gradient in WebGL, as Stripe's homepage does. Each step down that list looks richer and costs more.
Below are 11 animated gradients, from the WebGL mesh that started the trend to the one-keyframe CSS version, with the technique behind each, where it fits, what goes wrong, and a live pure-CSS demo of the same idea. Three entries are ours.
1. Stripe's homepage gradient: Best for fintech and SaaS heroes that want a premium colour field
Platform: WebGL (Stripe's small minigl wrapper) on a canvas
Stripe's angled, slowly flowing colour band is the animated gradient most people picture, and Kevin Hufnagl's teardown explains how it works. It is not CSS: Stripe draws it in WebGL with a minimal wrapper called minigl and a Gradient class that runs the animation, while a ScrollObserver pauses it when it scrolls off screen. The four colours come from CSS variables on the canvas element, `--gradientcolorzero` through `--gradientcolorthree`, so designers can retheme it without touching the shader.
Hufnagl packaged the result as a dependency-free script with a downloadable HTML example. Those two details, colours in CSS and pausing off screen, are worth copying into any WebGL background.
Our Skewed Gradient Hero Background below is a pure-CSS take on the angled band: flowing colour cut on a diagonal across the top of a light page, with no WebGL.
Watch out for: The teardown dates from 2020 and Stripe's site changes often. Treat it as a technique reference, and do not ship another company's exact brand gradient.
2. CSS Gradient Animator by Ian Forrest: Best for a moving gradient background in one keyframe
Platform: Free generator, outputs plain CSS
The classic technique in tool form. You pick colours, a gradient angle, a scroll angle and a speed, and the generator writes a linear-gradient plus a looping keyframe that moves background-position from 0% to 100% and back. It has been the quickest way to an animated gradient for years.
The trick behind it: make the gradient much larger than its box, then slide it. Only background-position changes, so the colours stay exactly as you defined them.
Our Animated Gradient Background below is a pure-CSS version of the same method: four colours on a 400% canvas that pans back and forth.
Watch out for: The generator's output includes old vendor-prefixed keyframes you no longer need. Strip them, and slow the loop down: 15 seconds or more reads as calm.
3. Josh W. Comeau's Magical Rainbow Gradients: Best for buttons and cards whose colours shift smoothly
Platform: CSS Houdini (registered properties) + React hook
You cannot transition a gradient directly, but you can transition the colours inside it if the browser knows they are colours. Josh Comeau's article registers three custom properties as `<color>` with `CSS.registerProperty`, gives them transitions, and feeds them into a radial gradient. A small `useRainbow` hook steps them through a 10-colour palette on an interval, so the button seems to flow.
It also degrades well: where registered properties are unsupported the hook exits and the button keeps a static gradient, which is also what reduced-motion users get.
Our Morphing Gradient Background below is a pure-CSS version of the idea with no JavaScript: the angle and colours are registered properties, so one keyframe turns the gradient and eases between three palettes.
Watch out for: Every frame of a colour tween repaints the whole gradient. Fine for a button, more expensive for a full-screen background; keep large ones slow.
4. web.dev's twinkling @property gradient card: Best for learning @property gradient animation in pure CSS
Platform: Pure CSS, @property (Baseline since July 2024)
When @property reached Baseline in July 2024, the web.dev announcement used an animated gradient to show it off: a card with two radial gradients whose colours are registered custom properties (`--shine-1`, `--shine-2`), each animated by its own keyframe at a different speed, so the card twinkles.
Running the two colours on different durations is the useful trick. The combined pattern takes a long time to repeat, so a simple loop feels organic. MDN's compatibility data lists @property in Chrome 85, Safari 16.4 and Firefox 128.
Our Rainbow Background below is another registered-property gradient: a full-spectrum gradient whose hues roll continuously.
Watch out for: Unregistered custom properties snap instead of tween. If your gradient jumps between colours, check that the @property rule has the right syntax and an initial-value.
5. Conic gradient spins: Best for slow rotating colour behind dark product heroes
Platform: Pure CSS: conic-gradient plus a registered angle or transform
A conic gradient sweeps colour around a centre point, so rotating it reads as light swinging around a stage. There are two ways: rotate the element with transform (cheapest), or register an angle with @property and animate the `from` angle inside the gradient so the box stays still while the colour turns.
The same technique powers the spinning gradient borders on many SaaS sites; our border animation examples cover that use.
Our Conic Gradient Background below is a pure-CSS version: a wide conic gradient of four accent hues turns slowly behind a soft dark vignette.
Watch out for: Rotating a whole element that is larger than the viewport can cause scrollbars. Clip it with overflow: hidden on a parent, or rotate the gradient angle instead.
6. Grainy Gradients on CSS-Tricks: Best for the printed, textured gradient look of modern brands
Platform: CSS + an inline SVG feTurbulence filter
Jimmy Chion's 2021 CSS-Tricks article is the reference for grain. Noise comes from an SVG `feTurbulence` filter used as a background under a linear gradient; a CSS filter raises contrast and brightness to sharpen the grain, and `mix-blend-mode` with `isolation` blends the layers. The grain breaks up the colour banding that smooth gradients show on many screens.
Animate the colour layer and leave the grain still, and you get a gradient that feels like paper or film rather than a screen.
Our Paper Grain Background below is a pure-CSS version: soft pastel clouds drift across warm paper while a fine SVG-turbulence grain shimmers on top.
Watch out for: The article notes Chromium and WebKit render mix-blend-mode differently, so the same grain can look heavier in Safari. Test both before you ship.
7. Paper's Mesh Gradient shader: Best for true mesh gradients with real colour blending
Platform: Canvas shader, npm (@paper-design/shaders-react), Apache-2.0
A mesh gradient blends several colour points across a surface instead of along one line, and CSS can only approximate it with blurred layers. Paper's open-source shader collection includes an animated mesh gradient, a static one and a grain gradient, installable as React components, so you get the real thing on the GPU.
Use it when the CSS approximation shows muddy overlaps or visible circle edges. The shader blends colours mathematically, so transitions stay clean at any size.
Our Mesh Gradient Background below is the pure-CSS approximation: four pastel colour points drift on looping paths, all driven by one registered @property angle through sin().
Watch out for: A shader runs on every pixel every frame. Keep it to one section, pause it off screen, and provide a static image for devices without WebGL.
8. ShaderGradient: Best for designers making 3D moving gradients in Figma or Framer
Platform: Tool for Framer, Figma and React
ShaderGradient is a tool for animated 3D gradients, pitched as "Create beautiful moving gradients on Framer, Figma and React." Instead of flat colour, the gradient is a lit, rippling 3D surface, closer to a liquid than a fill.
It is a good fit when the designer owns the hero: they can tune the gradient visually in the tool they already use and hand over something that runs.
Our Liquid Wallpaper Background below is a pure-CSS take on the liquid look: rich colour pools slowly fold into each other with a soft highlight gliding through, built from blurred conic gradients.
Watch out for: 3D gradients are WebGL under the hood. Check the cost on a mid-range phone and keep a static export for the poster frame.
9. Our Gradient Backgrounds collection: Best for copying a moving gradient in plain CSS
Platform: Motions directory, free Ours
The Gradient Backgrounds collection gathers every gradient in our backgrounds directory: panning, mesh, conic, morphing, grainy, holographic, silk and liquid. Each is HTML and CSS only, with two custom properties for colour and size and a prefers-reduced-motion guard written in.
The Holographic Background below shows how far blend modes go: a silvery foil with pastel rainbow bands and fine diagonal streaks sliding against each other, plus a sweeping glare.
Watch out for: Holographic and rainbow styles are loud. Use them for one surface, such as a card, a badge or a hero, not a whole page.
10. Our Animated Gradient Text: Best for headlines and keywords with flowing colour
Platform: Motions directory, free Ours
The same panning technique works inside letters. Our Animated Gradient Text clips a moving gradient to the text with background-clip, so the colour flows through the word while it stays real, selectable text.
Browse the Gradient Text collection for conic, aurora, gold and holographic variants, or read our gradient text guide for how real sites use it.
Watch out for: Gradient text can fail contrast at its lightest stop. Check every colour in the gradient against the background, not just the average.
11. Our Gradient Orb: Best for AI and voice products that want a living centrepiece
Platform: Motions directory, free Ours
An animated gradient does not have to fill the background. Our Gradient Orb concentrates it into a glossy sphere of swirling colour floating in the dark, with a halo that shifts hue as it turns: the look many AI voice assistants use.
As a single object it draws the eye where a background should not, which makes it useful for an empty state, a hero centrepiece or an assistant's idle state. For the thinking and speaking states around it, see our AI thinking animation examples.
Watch out for: Orbs read as "AI" so strongly that they can feel generic. Tie the colours to your brand and give it a reason to change, such as speaking versus listening.
How to choose an animated gradient technique
Match it to the look
A smooth colour drift wants the classic background-position pan. Colours that genuinely change, or an angle that turns, want @property. A soft, blended mesh wants blurred layers in CSS or a shader like Paper's. A textured, printed look wants grain over the gradient, as in the CSS-Tricks article. A lit, liquid surface wants WebGL, like Stripe's gradient or ShaderGradient.
Match it to the cost
background-position and transform pans are the cheapest. @property colour tweens repaint the gradient each frame, which is fine for small elements. Large blurred layers cost more paint time. WebGL costs a canvas and GPU time, so pause it off screen as Stripe does. For full-page backgrounds of every kind, our animated background examples compare costs side by side.
Match it to the content
Gradients behind text must pass contrast at every point of the loop, not just at the start. Slow it down: a cycle of 15 to 60 seconds reads as ambience, anything under 5 seconds reads as a warning light. Under prefers-reduced-motion, freeze on a good frame rather than removing the gradient, so the design still works. For hero placement and first-paint rules, see our hero section animation examples.
Ship a moving gradient that stays readable
Pick your four colours, choose the cheapest technique that gives the look you want, and put your real headline on top before you judge it. If you notice the motion before the words, slow it down.
If you want it tuned to your brand, describe it in the creator or paste your hero. You get the CSS (or the @property version if you want true colour tweens) with a reduced-motion freeze included.
Make an animated gradient hero background in pure CSS. Four brand colours (I'll paste them) blend as a soft mesh of blurred circles that drift on loops of 20 to 40 seconds, ease-in-out, each on a different duration. Add a fine SVG feTurbulence grain on top at low opacity that does not move. Keep white headline text above 4.5:1 contrast at every point of the loop. Under prefers-reduced-motion, freeze the mesh on its first frame.
Common questions
How do I make an animated gradient in CSS?
Set a linear-gradient background with background-size around 400%, then animate background-position from 0% 50% to 100% 50% and back with a slow, infinite keyframe. That moves the oversized gradient behind the box. Our Animated Gradient Background is a copyable example.
Can you transition a CSS gradient?
Not directly: background-image does not interpolate between two gradients. Register the colours or angle as custom properties with @property (with a syntax such as color or angle), use them inside the gradient, and then transition or animate those properties. @property works in Chrome 85+, Safari 16.4+ and Firefox 128+.
How does Stripe make its animated gradient?
According to Kevin Hufnagl's teardown, Stripe renders it in WebGL on a canvas using a small wrapper called minigl, with the colours set as CSS variables on the canvas and a scroll observer that pauses the animation off screen.
What is a mesh gradient?
A gradient that blends several colour points across a surface rather than along a single line, so colours flow into each other in two dimensions. In CSS it is usually approximated with several blurred radial gradients; shaders such as Paper's Mesh Gradient render it exactly.
Do animated gradients hurt performance?
Panning a gradient with background-position or transform is cheap. Animating colours with @property repaints the gradient every frame, and large blurs or WebGL cost more. Keep large gradients slow, pause them off screen, and test on a mid-range phone.