43 CSS Animated Backgrounds That Do Not Kill Your FPS

Most CSS animated gradient examples don’t animate the gradient at all. They stretch one oversized gradient and slide it with background-position, because the browser can’t interpolate gradient values until a custom property is registered with @property. That rule has worked across current browsers since July 2024 (MDN, 2024).

What is a CSS animated background and which properties can it animate?

See the Pen
Animated background css only squares by Álvaro (@alvarotrigo)
on CodePen.

Animated background css only squares uses varied animation-delay values to create asynchronous movement. By staggering start times, the squares create an organic flow that feels less mechanical.

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.

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

1. Set a fallback background-color on the element.
2. Add a linear-gradient with three or more color stops as the background-image.
3. Set background-size to 600% 600% (the examples that rank for this keyword run from 200% to 600%).
4. Write a @keyframes rule that moves background-position from 0% 50% to 100% 50% and back to 0% 50%.
5. Attach it with the animation shorthand and set the iteration count to infinite.
6. 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

See the Pen
Animated background colours by Álvaro (@alvarotrigo)
on CodePen.

Animated background colours demonstrates linear gradients with animation-timing-function adjustments. This technique creates fluid transitions between background colors without adding heavy DOM elements.

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

See the Pen
Pattern Infinite Scrolling Animation by Adam Abundis (@adamabundis)
on CodePen.

Pattern Infinite Scrolling Animation uses keyframes to create continuous motion. It demonstrates how animation-iteration-count: infinite can produce seamless looping backgrounds that maintain visual interest without performance issues.

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

See the Pen
SVG animated background by Josie Barker (@weenabeana)
on CodePen.

SVG animated background showcases vector graphics with CSS animations. Using SVG provides resolution independence for crisp animations on any screen density.

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

See the Pen
Blob background animation – CSS only by Álvaro (@alvarotrigo)
on CodePen.

This blob background animation uses border-radius animations with transform scale to create organic, flowing shapes. The technique achieves complex motion with minimal properties.

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

See the Pen
Water Wave CSS Background Animation by Álvaro (@alvarotrigo)
on CodePen.

Yo, this one’s killer. Get in on this gradient action, crafted with some basic HTML and CSS love. Got those wavy vibes going on in the back. It’s all about making your space pop!

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

See the Pen
Particles CSS Background Animation Effects by Álvaro (@alvarotrigo)
on CodePen.

Light up your site with these glowing particles. Pure magic with just CSS and HTML.

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

See the Pen
Sliding Diagonals Background Effect by Chris Smith (@chris22smith)
on CodePen.

Sliding Diagonals Background Effect uses background-position animation with carefully timed keyframes. This creates a sense of continuous motion perfect for landing page backgrounds.

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 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 fix for existing performance problems, warns against putting it on many elements, and notes that Chrome answers it by creating a compositing layer or a stacking context.

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.

• 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 archived WebFundamentals guidance 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 examples

When Stars Shoot

See the Pen
Only CSS: Shooting Star by Yusuke Nakaya (@YusukeNakaya)
on CodePen.

Only CSS: Shooting Star combines multiple animation properties:

• Transform translate for diagonal movement
• Opacity changes for fade effects
• Z-index layering for depth perception

This CSS-only approach avoids JavaScript dependencies while still creating complex motion patterns with pure CSS3 animation properties.

Gradient Groove

See the Pen
CSS animated background by Andrew (@chickenroyal)
on CodePen.

CSS animated background shows how animation-direction: alternate combined with easing functions creates pulsing gradient effects. This technique works well for subtle website animation that enhances rather than distracts.

Journey with the Tri Travelers

See the Pen
Tri Travelers by Nate Wiley (@natewiley)
on CodePen.

Tri Travelers demonstrates how transform rotate combined with translate creates complex movement paths. The triangles follow mathematically precise patterns while maintaining smooth performance through GPU acceleration.

Landscapes That Move

See the Pen
Background Image Animation by Álvaro (@alvarotrigo)
on CodePen.

Background Image Animation demonstrates how to animate standard image backgrounds. It’s an excellent example of how animation-duration control affects user perception of movement speed.

Colorful Rain, Anyone?

See the Pen
ColorDrops by Nate Wiley (@natewiley)
on CodePen.

ColorDrops demonstrates randomized animation patterns with varied durations. This creates natural-feeling movement using purely CSS techniques without relying on JavaScript libraries.

Not Your Regular Backdrop

See the Pen
Animation Background || Only Css by Nour Ibram (@nouribram)
on CodePen.

This uses viewport units to ensure proportional scaling across device sizes. This responsive approach maintains animation quality on everything from mobile browsers to large desktop displays.

Animated Grids Galore

See the Pen
Pure css grid background animation by Álvaro (@alvarotrigo)
on CodePen.

This background animation combines CSS Grid layout with animation properties. This structured approach helps maintain performance by limiting animated elements to their defined grid areas.

When Shadows Grow Long

See the Pen
Long shadow by Mladen Stanojevic (@mladen___)
on CodePen.

This demonstrates how subtle transform changes can create dramatic visual effects. The progressive shadow movement creates depth without heavy computational overhead.

Glow, Glitter, and Glide

See the Pen
CSS Glowing Particle Animation by Nate Wiley (@natewiley)
on CodePen.

CSS Glowing Particle Animation uses randomized animation-delay values for naturally dispersed motion timing. This creates organic movement patterns that feel less programmatic.

Vibe with Figures

See the Pen
Figures Background Animation – Pure CSS by Álvaro (@alvarotrigo)
on CodePen.

This demonstrates how easing functions affect perceived smoothness in animation. Different timing curves create distinct personality in otherwise identical motion paths.

Mosaic Moves

See the Pen
Interactive mosaic background by Benoit Lavoie-Lamer (@xposedbones)
on CodePen.

This responds to user input, showing how CSS animations can interact with JavaScript events for enhanced interactivity.

Chill with the Ambient

See the Pen
Ambient Background by Dimitra Vasilopoulou (@mimikos)
on CodePen.

Bask in the feels created by Dimitra Vasilopoulou. It’s tranquil. It’s ambient.

Bubbling Over

See the Pen
Bubble background animation by Diyorbek Olimov (@diyorbek0309)
on CodePen.

Float away with this bubble background magic, crafted by Diyorbek Olimov. Color bursts and bubble wonders. All with CSS.

Dreaming in Clouds

See the Pen
Floating Cloud Background by Shaw (@shshaw)
on CodePen.

Shaw got the moves. Blurs, perspectives, and clouds floating around. It’s a dream, but with CSS.

Autumn Leaves Waltz

See the Pen
October Falling Leaves CSS Animation #css no #javascript by Casthra Demosthene (@incrediblecast)
on CodePen.

Drift into the season. No fancy tools, just pure CSS, and those leaves twirling around.

Mountains that Move

See the Pen
Cool Mountain Background with animations by Igor Milenkovic (@imilenig)
on CodePen.

Elevate your site with this backdrop. Animated mountains that adapt? Yep, they’re here.

Particle Party, No Extras

See the Pen
Pure CSS Particle Animation by Takeshi Kano (@tonkotsuboy)
on CodePen.

Particles that sway and dance without any fuss. No need for anything but CSS. Let’s party!

Get Doughnut-ty

See the Pen
Donuts background by Charles Swierczek (@karolsw3)
on CodePen.

You see those vector donuts floating around? Sweet, simple, and oh-so-cool!

Chill Vibes Only

See the Pen
Background by Chandan Choudhary (@Cancepto)
on CodePen.

Props to Chandan Choudhary! This background’s got swag, no doubt.

Spiral into Clouds

See the Pen
Cloudy Spiral CSS animation by Hakim El Hattab (@hakimel)
on CodePen.

Hakim El Hattab, you rockstar! This ain’t your typical background. Feels like you’re loading up some futuristic vibes that just keep spinning. Mind. Blown.

Smooth Moves by Osorina

See the Pen
CSS Background Effect by Osorina Irina (@osorina)
on CodePen.

Shoutout to Osorina Irina for this sleek backdrop. Pure HTML and CSS goodness!

Boom with Fireworks

See the Pen
Pure CSS Fireworks by Álvaro (@alvarotrigo)
on CodePen.

Want that Congratulations page to explode with joy? Look no further. Cityscape in front? Now, that’d be rad!

Twinkle, Twinkle

See the Pen
pure CSS twinkling stars background by Anastasia Goodwin (@agoodwin)
on CodePen.

Anastasia Goodwin’s got the stars dancing. Dreamy, right?

Rock the Foundation

See the Pen
Foundation 6 Animated Background by Anthony Potgieter (@anthonypotgieter)
on CodePen.

Kudos to Anthony Potgieter. This one’s a stunner!

Crossing to Animal Kingdom

See the Pen
Animal Crossing – Detail Background by Amanda Cifaldi (@algcifaldi)
on CodePen.

Nostalgia hit? Relive those Animal Crossing days with this retro delight!

3D Dreams with SVGS

See the Pen
Floating SVGS by Rune Sejer Hoffmann (@RSH87)
on CodePen.

Feel that depth? It’s SCSS doing its magic. Blur, perspective, and pure awesomeness!

Warp Speed Ahead!

See the Pen
Seeding by Álvaro (@alvarotrigo)
on CodePen.

Ever felt like cruising through a universe of balls? This is your jam!

Gradient Mask Magic

See the Pen
Animated CSS mask-image gradient by Chris Neale (@onion2k)
on CodePen.

Chris Neale, you legend! This one’s a masterpiece.

Heartbeats & Dreams

See the Pen
Hearts animation background by Pogany (@giaco)
on CodePen.

Feel the love with this heartful creation by Pogany.

Starry-eyed Wonder

See the Pen
Parallax Star background in CSS by sarazond (@sarazond)
on CodePen.

Lose yourself in a galaxy of stars. Feel the depth. The parallax magic is real here!

Back to the 80s

See the Pen
Traveling through Tron – Best viewed in Webkit by Álvaro (@alvarotrigo)
on CodePen.

All you retro lovers, this grid’s for you. It’s neon. It’s rad. It’s everything you wanted.

Ripples of Joy

See the Pen
Animated Ripples background by Vaibhav Arora (@vaibhavarora)
on CodePen.

Vaibhav Arora makes waves, literally! Dive into this rippling beauty.

Fireflies in the Night

See the Pen
CSS Fireflies by Mike Golus (@mikegolus)
on CodePen.

Elegance meets tranquility. Light up your world with these CSS-only fireflies.

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?

See the Pen
rainbow lines of straightness by Matei Copot (@towc)
on CodePen.

This combines color transitions with position changes. This technique works well with frameworks like React for interactive UI animations.

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?

See the Pen
CSS Multiple Background Image Parallax Animation by carpe numidium (@carpenumidium)
on CodePen.

This creates depth through multi-layered background images moving at different speeds. This parallax effect provides visual interest with minimal markup.

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.

Support differs by browser, 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.

• Author
• Recent Posts

Bogdan Sandu

Bogdan Sandu specializes in web and graphic design, focusing on creating user-friendly websites, innovative UI kits, and unique fonts.

Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.

Latest posts by Bogdan Sandu (see all)

• What is Backend in Web Development? - September 13, 2026
• What is Frontend Development? - September 11, 2026
• How to Make a Button in Figma: Design Best Practices - September 10, 2026