What is a CSS animated background and which properties can it animate?
Anything on the background layer can move or change: the color, a gradient, an image or a pattern. Keyframes or transitions drive it, and no JavaScript, GIF or video file is involved.
Hero sections, landing pages and cards are where it gets used most, since a slow loop adds motion without a media request. A gradient version adds no file request and scales to any viewport.
Both CSS animations and transitions can drive it. MDN’s list of animatable properties covers the ones behind most background effects, and the table below has them.
| Property | What it changes | Typical use |
|---|
| background-color | Blends one color into another | Color cycling, hover shifts |
| background-position | Slides the image or gradient layer | Moving gradients, scrolling patterns |
| background-size | Stretches or zooms the layer | Pulsing glows, slow zoom |
Gradients don’t follow that pattern. The browser reads a gradient as an image, so a transition between two gradients snaps instead of blending, as web.dev’s @property article explains.
Sliding is allowed. Blending has to wait until the browser knows what the values inside the gradient mean.
How to make an animated gradient background with keyframes
Stretch a gradient to 200% to 600% of the element, then slide it back and forth with background-position inside a keyframe animation. One keyframe rule with stops at the start, the midpoint and the end handles the whole effect.
Build steps
- Set a fallback background-color on the element.
- Add a linear-gradient with three or more color stops as the background-image.
- Set background-size to 600% 600% (common examples use anywhere from 200% to 600%).
- Write a @keyframes rule that moves background-position from 0% 50% to 100% 50% and back to 0% 50%.
- Attach it with the animation shorthand and set the iteration count to infinite.
- Check the first and last frame. Both must show the same position, or the loop jumps on restart.
.hero {
background-color: #18a2f0;
background-image: linear-gradient(270deg, #18f0b8, #18a2f0, #db5640);
background-size: 600% 600%;
animation: drift 20s linear infinite;
}
@keyframes drift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
A gradient generator speeds up picking color stops, though three stops cover most designs.
Duration, easing and direction
Start around 15 to 20 seconds and shorten it only if the motion looks frozen. Fast loops suit flat color changes, not gradient drift.
On easing, MDN lists ease as the initial value, and it applies between each pair of keyframes. A three-keyframe loop therefore softens at every stop, so linear gives a steadier drift.
Direction is its own setting. The alternate value reverses every cycle and plays forward first (MDN), which lets a two-keyframe version skip the return trip. Set the iteration count to infinite and the loop keeps running.
Slow and linear beats fast and eased for anything sitting behind text.
How to animate gradient colors and angles with @property
Register the gradient’s variable with @property, declare its type, and animate the variable instead of the gradient. Once the browser knows the type is a color or an angle, it can interpolate the value, which is how a gradient finally blends instead of snapping (web.dev, 2024).
@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.card {
background: conic-gradient(from var(--angle), #ff6b6b, #4ecdc4, #ff6b6b);
animation: spin 6s linear infinite;
}
@keyframes spin {
to { --angle: 360deg; }
}
The rule takes syntax, inherits and initial-value descriptors, and syntax is the one that makes the animation possible. It belongs to the Houdini specifications (the CSS Properties and Values API).
Angle variables rotate a conic-gradient or tilt a linear one, and color variables blend one stop into another. A number variable can also feed hsl() if you want hue cycling.
Browser support and fallback
Firefox 128 (July 9, 2024) was the last of the major engines to ship @property, after Chrome and Edge 85 (August 2020) and Safari 16.4 (March 2023). That put it in Baseline Newly Available status in the web-features project data.
Older browsers are the failure case. The rule gets ignored, the variable stays an untyped string, and the gradient jumps between values instead of blending.
Design the static gradient so it looks finished on its own, and treat the motion as a bonus.
How to loop a moving image or pattern background without a seam
Move the background by exactly one tile length and the loop point disappears. Any other shift distance leaves a visible jump at restart, because the pattern lands mid-tile.
Noble Desktop’s stripe tutorial uses a 45-degree repeating-linear-gradient with a background-size of 198px, and the keyframe moves background-position vertically by 198px. The tutorial found that number by experimenting in Chrome’s DevTools, but it isn’t arbitrary. Stripes of 35px plus 35px repeat every 70px along the gradient line, which comes to about 99px along either axis (70 x 1.414), so 198px holds two full repeats.
When the shift matches the tile, the loop restarts on an identical frame and the pattern appears to scroll forever. When it doesn’t, you get a visible jump at every restart, stripes or shapes that seem to stutter, and an error that grows with the size of the mismatch.
Repeating gradients work well for this since they need no image file, and they make good background patterns built from CSS.
A raster tile follows the same rule. Shift by the image’s width or height, and make sure the tile’s edges match.
Noble Desktop also calls a full-page version distracting and sluggish on some devices, so scope the loop to a hero block or a card.
Layered CSS animated backgrounds: waves, particles, stars and SVG patterns
Effects that one background property can’t draw go on a separate layer (a pseudo-element or an absolutely positioned child) that moves with transform. Moving a layer leaves the background property itself untouched, and the parent clips the overflow.
Pseudo-element layers
The layer is a ::before or ::after with empty content and position absolute, and pointer-events none lets clicks through to the content. Use inset 0 for a static layer and width 200% for a sliding one.
Stacking is where this fails most often. Give the parent position relative, overflow hidden and either z-index 0 or isolation isolate, or a negative z-index layer slips behind the parent’s own background.
Waves and SVG
Waves are SVG paths drawn wider than the container and moved with translateX, so the path repeats before the layer runs out. Animating SVG with CSS follows the same keyframe rules as any other element.
A tool like an SVG waves generator outputs the path, and the loop distance is the width of one wave period.
An SVG tile also works as the layer’s background-image, and then the position loop from the previous section applies.
Particles and stars
Box-shadow stars need only one tiny element, since every star is a box-shadow and one animation moves them all. Separate elements give each particle its own size, delay and duration, which adds variety but also more DOM nodes.
Hundreds of particles belong on a canvas, not in CSS.
Why does a CSS animated background lag, and which properties cost the least?
Lag comes from every frame pushing the browser back into Style, Layout or Paint instead of Composite.
Chrome’s Lighthouse documentation defines a non-composited animation as any animation that triggers one of those earlier steps. The web.dev animation guide names transform and opacity as the properties that stay on the compositing stage.
Which stage each property triggers
Transform and opacity stay on the composite stage. Background-position, background-size and background-color trigger paint, and none of them is on the compositor-only list. The registered custom property behind an @property gradient is the one to verify first, since Unlighthouse’s summary of the Lighthouse audit lists it among properties that cannot be composited, which leaves it on the main thread.
For background-position the cost is a repaint on every frame. The property is not compositor-only, so each change makes the browser repaint the affected area on the main thread.
Sources don’t fully agree here. 21st.dev’s survey of React background components says a gradient on CSS keyframes costs almost nothing because no JavaScript runs. web.dev says anything that triggers paint or layout needs the main thread, and that the paint overhead outweighs the CSS versus JavaScript question.
Both are right about different properties. No JavaScript doesn’t mean no main-thread work.
Converting a background-position loop to a transform loop
Move the gradient onto its own layer, then translate that layer instead of sliding the background.
.shimmer {
position: relative;
overflow: hidden;
}
.shimmer::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: slide 2s linear infinite;
}
@keyframes slide {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
The coder/mux repository (since renamed coder/xum) made the same swap in pull request 980 (December 8, 2025). A shimmer moved from background-position to a translateX transform with a new shimmer-slide keyframe, to stop frame drops while a summary streamed in.
The pull request publishes no frame-rate figures, so treat the gain as directional until your own trace confirms it.
A drift built on a 600% stretch needs a layer six times wider, so shrink the stretch when you convert.
Measuring in Chrome DevTools and Lighthouse
Record the loop in the Performance panel and read the frame timeline for dropped frames. Paint flashing in the Rendering tab shows which regions repaint each frame. Lighthouse lists every DOM node with a non-composited animation, along with the failure reason for each.
As a last resort there’s will-change. MDN calls it a last resort for existing performance problems, warns against putting it on many elements, and notes that values which create a stacking context create it up front.
That stacking context side effect can change which layer sits behind your text, so recheck the layering after adding it.
Technique comparison by cost, support and best use
A transform-based layer is the cheapest choice for a full-screen backdrop, and the shifting gradient is enough for a small hero block.
| Technique | Animated property | Rendering stage | Best use |
|---|
| Shifting gradient | background-position | Paint | Hero block, card |
| Typed gradient | Registered variable | Main thread | Blending colors, rotating angles |
| Scrolling pattern | background-position | Paint | Stripes, textures on small areas |
| Transform layer | transform | Composite | Full-screen backdrop, waves, shimmer |
| Many small elements | transform per element | Composite, many layers | Sparse stars, bokeh dots |
- The shifting gradient needs two or three keyframes and no extra markup, but it repaints on every frame.
- A typed gradient gives true color blending and rotation. It needs @property support and runs on the main thread.
- Scrolling patterns skip the image file when built from repeating gradients, as long as the shift distance matches the tile.
- A transform layer stays on the compositor, though it needs a pseudo-element, clipping and the stacking rules from earlier.
- Many small elements give varied, organic motion. Every one of them adds DOM weight and a layer.
The popular pick, a background-position gradient, is the right call for a hero block and the wrong one for a backdrop that stays on screen.
If the brief only says color cycling, animate background-color and skip @property. Reserve the typed gradient for effects where the stops must blend or the angle must turn.
Reduced motion, pause controls and text contrast for animated backgrounds
A moving background needs a prefers-reduced-motion rule and a pause control once it runs past five seconds. The text on top also has to hold its WCAG contrast on every frame.
prefers-reduced-motion
The setting reflects a request from the user’s device to minimize motion, and reading it takes one media query. MDN names scaling and panning of large objects as vestibular triggers, and a gradient drifting across the whole viewport is a large pan.
@media (prefers-reduced-motion: no-preference) {
.hero {
animation: drift 20s linear infinite;
}
}
Putting the animation inside the no-preference query makes motion opt-in. Everyone else gets the static gradient.
Safari 10.1, Firefox 63 and Chrome 74 support the feature (MDN). Apple.com used it to switch off a scaling effect and background video motion, as WebKit’s Responsive Design for Motion post describes.
Pause, stop, hide
WCAG 2.2 Success Criterion 2.2.2 (Level A) asks for a pause, stop or hide mechanism when motion starts automatically, lasts more than five seconds and sits alongside other content, per W3C. A looping background meets all of those conditions.
The simplest control is one button that adds a class setting animation-play-state to paused on every moving layer. W3C’s understanding document says one control per moving element passes the criterion but gives a poor experience, because users must stop each element one by one, so one toggle for the whole page is the better build.
Text contrast over motion
W3C sets 4.5:1 as the Success Criterion 1.4.3 minimum for normal text and 3:1 for large-scale text.
A moving background changes the pixels behind each letter, so color contrast has to hold on the lightest and darkest frames, not on one screenshot. Pause the loop at its lightest frame and measure, then do the same at the darkest. If either fails, add a semi-opaque scrim under the text block.
The scrim works because W3C’s G18 technique lets the area around the letters carry the ratio, even when the full background does not.
When a CSS animated background is the wrong choice
Switch away from CSS when the background has to react to input or play filmed footage, or when gradients and layers can’t draw what you need.
Cursor trails and flow fields read pointer position, so they need a script. For filmed or photographic motion, Onderhond’s CSS versus video comparison picks video when presentation matters most. On reading-heavy pages a static background usually serves the text better than any loop.
Google’s web.dev guide to CSS versus JavaScript animations puts stop, pause, slow down and reverse on the JavaScript side. That overstates the case, since animation-play-state already pauses in plain CSS. The real JavaScript cases are reversing and sequencing, through the Web Animations API or a library such as GSAP.
Canvas animations redraw every frame in JavaScript, so cost scales with particle count and canvas size, according to 21st.dev’s component survey.
For GPU-heavy scenes, WebGL takes over. Thirty of the 155 background components in that survey use it in some form.
Stay with CSS while the effect is gradients, patterns and a handful of layers, with no input to read.
CSS Animated Background FAQ
Does a CSS animated background affect Core Web Vitals?
Not through layout shift. Cumulative Layout Shift counts elements that move, and Chrome’s Lighthouse documentation ties it to non-composited animations that shift elements.
A background slid by background-position or transform moves no element, so any cost shows up as jank in the Lighthouse audit instead.
Does an animated background drain mobile battery?
Yes, any loop that runs forever keeps the browser producing frames.
Chrome’s Lighthouse documentation notes that non-composited animations force extra rendering work, so a transform loop costs less than a paint-bound one. A pause toggle or a reduced-motion rule stops the work entirely.
How do you animate a background color on hover?
Add a transition on background-color to the base element, then set a new background-color in the :hover rule. No keyframes are needed.
Start near 0.3 seconds and adjust by eye.
Can a background animate on scroll instead of on a timer?
Yes. Chrome 115 introduced scroll timelines (Chrome for Developers), and the animation-timeline property with scroll() ties a normal keyframe animation to scroll position instead of the clock.
Safari 26 supports them too, and Firefox 159 (October 27, 2026) turns them on by default. Older versions still lack them, so wrap animations driven by scroll position in an @supports check and keep a static background as the fallback.
Does Tailwind CSS include background animation utilities?
No. Tailwind’s documentation lists four built-in animations (spin, ping, pulse and bounce) plus animate-none, and none of them animates a background.
A drifting gradient needs custom @keyframes defined in the theme, then a utility that references them.
Is there a generator for CSS background animations?
Yes, in two steps. A gradient generator outputs the static gradient, and a keyframe animation generator builds the @keyframes block.
You still choose the background-size and position values that make the gradient move.
Where to Place Your First CSS Animated Background
Put the first one on one hero block and finish it as a static design before any motion gets added. Each step can then be tested alone.
Get the static gradient approved in review, add the loop behind the reduced-motion query, then trace it and convert to a transform layer only if frames drop.
A loop added last never blocks the launch, and a failed trace costs one conversion instead of a redesign.
The web-features project expects @property to reach Baseline Widely Available on January 9, 2027 (checked October 2026).
Revisit the typed-gradient decision then. Until that date, a blend-based design needs a static fallback that looks finished on its own.