AI CSS Animations

CSS Animated Backgrounds

90 pure CSS animated backgrounds: moving gradients, aurora, mesh gradients, waves, starfields, particles and grids. Each one is a single layer you drop into a hero or section, with no canvas and no JavaScript.

Animated Gradient Background

The classic moving gradient: four colors on a 400% canvas that pans back and forth. Only background-position animates, and every color is derived from your accent.

gradient · playful

Aurora Background

Soft ribbons of accent-tinted light sway, stretch and tilt across the top of a pale page and mix where they cross. A light-mode aurora for SaaS heroes: three blurred bands that only transform.

aurora · gradient · light

Mesh Gradient Background

Four pastel color points drift on looping paths and blend into a soft mesh. One registered @property angle drives every point through sin() and cos(), so the loop is exact.

mesh · gradient · light

Gradient Blobs Background

Three organic blobs with gradient fills morph their outlines and drift, darkening where they overlap like ink on paper. The shapes come from animated eight-value border-radius.

gradient · playful · light

Blurred Orbs Background

Three soft glowing orbs circle slowly over a near-black base and brighten where they cross. Each orb rides a rotating wrapper, so only transform animates, and the glow is a radial gradient.

gradient · dark · subtle · tailwind

Lava Lamp Background

Warm wax blobs rise from a pool at the bottom, stretch, merge into the pool at the top and sink back. The goo is the blur and contrast trick in em, so it scales with --bgx-size.

gradient · playful · dark

Holographic Background

A silvery foil with pastel rainbow bands and fine diagonal streaks sliding against each other, plus a glare that sweeps across. Blend modes do the iridescence, not images.

gradient · light · playful

Rotating Conic Gradient Background

A wide conic gradient of four accent hues turns slowly behind a soft dark vignette, like colored light swinging round a stage. The layer only rotates, which is cheap on any size.

gradient · dark · tailwind

Northern Lights Background

Green aurora curtains with violet tops sway above a mountain ridge on a night sky, their rays drifting sideways. Curtains only skew and slide, and the ridges are clip-path polygons.

aurora · dark · gradient

Sunset Sky Background

A full day in twenty seconds: the sun arcs over dark hills, the sky warms into sunset and fades to night as the moon rises. One rotating arm carries both, and the skies crossfade.

gradient · playful

Skewed Gradient Hero Background

A band of flowing color cut on a diagonal across the top of a light page, the angled hero look payment and SaaS sites use. Three gradient tiles slide at different speeds inside it.

gradient · light · mesh

Grainy Gradient Background

Two warm color clouds drift over a deep gradient under a fixed layer of film grain. The grain is an inline SVG feTurbulence filter blended with overlay, so it never needs an image file.

gradient · noise · dark

Spotlight Background

Two soft cones of light hang from the top of a dark stage and sweep back and forth, crossing in the middle. Each beam is a conic gradient faded with a mask, rotating from its lamp.

dark · gradient · subtle

Underwater Background

Deep water that darkens toward the bottom, with slanted shafts of light swaying down from a shimmering surface. The caustics are two ring tiles drifting in opposite directions.

gradient · dark · subtle

Breathing Glow Background

A soft glow in the middle of a dark surface slowly swells and fades on a six second breath, with a wider halo lagging just behind. Calm behind a hero, a player or an AI chat.

dark · subtle · gradient

Color Changing Background

The plainest version of the effect: the whole background eases from your accent through three sibling hues and back. One background-color keyframe, plus a soft top light for depth.

gradient · playful

Rainbow Background

A full spectrum gradient whose hues roll continuously, the RGB look from gaming setups. A registered @property number turns every stop round the color wheel, so nothing slides.

gradient · playful

Marble Background

Charcoal, gold and accent veins drift through pale stone, bending round a fixed swirl of turbulence. An SVG displacement filter warps a sliding stripe tile, so keep it to one hero per page.

light · subtle · noise

Ambient Glow Background

The dark product hero look: two soft accent glows bleed in from opposite corners and slowly breathe, under a hairline of light along the top edge. Quiet enough to sit behind copy.

dark · subtle · gradient · tailwind

Fire Glow Background

Soft flames lick up from the bottom edge and flicker at different speeds over a breathing heat glow, with your accent as the hot base color. Each flame is a blurred teardrop that only transforms.

dark · gradient · playful

Morphing Gradient Background

A three color gradient that turns its angle and changes its colors at the same time, easing between three palettes. The angle and colors are registered with @property, so they really interpolate.

gradient · playful

Neon Glow Background

Two neon tubes wash a dark wall in magenta and cyan, flicker now and then, and ripple in the wet floor below. Each reflection shares its tube's flicker animation, so the pair stays in sync.

dark · gradient · playful

Silk Background

Deep satin in your accent hangs in soft folds that ripple sideways as if a breeze moved it. An inline SVG displacement filter bends a sliding tile of light and shadow bands.

dark · subtle · gradient

Watercolor Bloom Background

Pigment blooms spread across warm paper one after another, each with the darker rim of real watercolor, mixing where they overlap and fading away. The ragged edges come from an inline SVG filter.

light · playful · gradient

Edge Glow Background

A band of shifting color glows along all four edges of a dark frame, flowing around it like an AI assistant listening. A spinning conic gradient seen through a static edge mask.

gradient · dark · playful · tailwind

Plasma Background

The old demoscene plasma: two fields of smooth color rings drift past each other and a difference blend turns their overlap into flowing cells of color. Pure gradients, only transforms move.

gradient · playful · dark

Subtle Gradient Sweep Background

A near-white page with a faint accent wash at the top and a wide, soft band of tinted light that glides across every nine seconds, then rests. Made to sit behind dark text on a light hero.

light · subtle · gradient

Gradient Orb Background

A glossy sphere of swirling color floats in the dark with a halo that shifts hue as it turns, the look of an AI voice assistant. Two conic gradients spin in opposite directions under a glass shine.

gradient · dark · playful · tailwind

Lens Flare Background

A bright light in the corner throws a horizontal streak and a line of colored ghosts across the frame, and they swing through the center as the light drifts, like a camera panning past the sun.

dark · gradient · subtle

Prism Rainbow Background

A thin white beam hits a glass prism and fans out into a rainbow that sways and shimmers across the dark. The spectrum is one conic gradient wedge, faded toward the edge with a mask.

dark · gradient · playful

Parallax Starfield Background

Three layers of stars drift upward at different speeds over a deep night sky, so the near stars pass the far ones. Each layer is one tiled gradient moved by exactly one tile.

space · particles · dark

Shooting Stars Background

Meteors streak diagonally across a dark, dusty sky every few seconds, each with a glowing head and a fading tail. The streaks move on transform only, staggered with negative delays.

space · particles · dark

Twinkling Stars Background

Four-pointed stars flare and fade at their own pace over a still field of faint stars, like a clear night sky. Each sparkle is one clip-path span that scales and turns.

space · dark · subtle

Spiral Galaxy Background

A tilted two-armed spiral galaxy turns slowly around its bright core in a field of stars. The arms are one box-shadow list of stars and dust, so the whole disk rotates as a single layer.

space · dark · particles

Warp Speed Background

Star streaks burst out of the center and stretch as they race past, the classic jump to hyperspace. Each streak is a line from the center that grows with scaleX, so nothing repaints.

space · dark · particles

Snowfall Background

Snow falls in three depths over a winter night, near flakes bigger, softer and faster than far ones, each layer swaying on its own. Tiled gradients keep it to three moving layers.

particles · dark · subtle

Rain Background

Slanted rain in two depths pours over a dark, wet evening while ripples spread across the ground. The streaks are tiled elliptical gradients on two rotated layers.

particles · dark

Floating Bubbles Background

Soap bubbles of every size wobble up a soft pastel wash and slip off the top. Each bubble rides a full-height carrier span, so it crosses any hero whatever its height.

particles · playful · light

Fireflies Background

Fireflies drift and blink above dark hills at dusk, some near and bright, some small and far away. Wandering runs on translate and blinking on opacity, so the two never sync up.

particles · dark · subtle

Confetti Background

Paper confetti in four hues flutters down a light backdrop, each piece flipping in 3D as it sways. Colors come from the accent with relative color syntax, so one variable retints it.

particles · playful · light

Particle Network Background

Clusters of linked dots drift and turn over a dark field while their links fade in and out, a pure CSS take on particles.js. Each cluster is one span: nodes in box-shadow, links in gradients.

particles · geometric · dark

Floating Particles Background

Specks of dust float up through slanted beams of light in a dim room, glinting as they drift. The motes ride full-height carriers, and the beams sway and breathe on one layer.

particles · dark · subtle

Bokeh Lights Background

Out-of-focus light discs in three hues drift and swell over a dark backdrop, each with the brighter rim of real lens bokeh. The discs are flat radial gradients, so no blur filter is needed.

particles · dark · subtle

Rising Embers Background

Glowing embers climb from an unseen fire, flickering and zigzagging as they cool and fade halfway up a dark backdrop. The climb, the zigzag and the flicker are three separate animations.

particles · dark

Matrix Rain Background

Columns of glyph marks light up as bright heads fall past and leave fading trails, the digital rain from The Matrix. The glyphs are a gradient mask, so no font or text is involved.

dark · particles

Fireworks Background

Rockets climb and burst into double rings of sparks that sag and fade over a night sky, in four hues. Each burst is one element whose box-shadow sparks spread out as it scales up.

particles · dark · playful

Lightning Storm Background

Heavy clouds roll over a dark sky until a forked bolt strikes and the whole scene flashes twice. The bolts are clip-path polygons, the flash is one overlay animating opacity.

dark · gradient

Falling Leaves Background

Autumn leaves drift down a warm backdrop, rocking side to side like a pendulum and flipping over as they fall. The rock is a rotate around a pivot above each leaf, the fall a full-height carrier.

particles · light · playful

Cherry Blossom Background

Pink petals ride a spring breeze diagonally across a pale sky, tumbling in 3D as they go. Each petal's carrier is the size of the background, so the diagonal holds in any container shape.

particles · light · subtle

Floating Hearts Background

Hearts in three shades rise from the bottom of a blush backdrop, swaying, beating and fading out near the top. Each heart is four gradients on one pseudo-element, no clip-path or SVG.

particles · playful · light

Floating Balloons Background

Glossy party balloons on strings float up a soft sky in five hues, the far ones smaller and slower, each tilting as it drifts. Sizes scale per balloon with font-size, so one set of rules draws all.

playful · light · particles

Floating Lanterns Background

Paper sky lanterns glow and flicker as they drift up into a violet dusk, near ones large and bright, far ones small and dim. A warm radial highlight at the base of each lantern is the flame.

particles · dark · subtle

Orbiting Planets Background

Five planets circle a glowing sun on faint orbit lines, inner ones fast and outer ones slow, with the lit side always facing the sun. Each orbit ring just rotates, carrying its planet.

space · dark · geometric · tailwind

Rain on Window Background

Beads of rain cling to a window over blurred city lights while bigger drops slide down in fits and starts, leaving wet trails. The stop and go comes from keyframes with short, nearly flat segments.

particles · dark · subtle

Fog Background

Banks of mist roll in opposite directions over a pine treeline at night, thickening and thinning as they pass. Pines are tiled conic gradients, each fog bank a repeat-x tile that wraps at the edges.

dark · subtle

Black Hole Background

A glowing accretion disk swirls around a black hole, passing behind it and in front of it, ringed by a thin halo of bent light. The front half of the disk is a second copy clipped with inset().

space · dark · tailwind

Star Trails Background

Arcs of starlight circle the pole star over dark hills, like a long exposure photo of the night sky, and the whole sky keeps turning. Each trail is one bordered circle showing a quarter or half arc.

space · dark · subtle

Solar Eclipse Background

A total solar eclipse: the black moon sits in a halo of corona rays that shimmer as two ray layers turn in opposite directions, with a diamond ring glint pulsing at the rim.

space · dark · tailwind

Nebula Background

Clouds of glowing gas in two hues swirl slowly behind dark dust lanes and a field of stars, with a few bright stars flaring. Two cloud layers turn in opposite directions and blend with screen.

space · dark · gradient

Planet Horizon Background

The curved limb of a giant planet fills the bottom of a starry sky, its cloud bands drifting as it turns under a glowing atmosphere, while a small moon crosses overhead. Only transforms animate.

space · dark

Animated Grid Background

Thin grid lines pan diagonally under a soft top glow and fade out toward the edges, the dark hero look of many developer sites. The layer moves exactly one cell per loop, so it never jumps.

grid · dark · subtle

Retro Synthwave Grid Background

An 80s outrun drive: a neon grid floor rushes toward a glowing horizon and a ridge of mountains. The floor is one plane laid flat with perspective and moved by one cell per loop.

grid · dark · playful

Wave Background

Four layers of waves roll along the bottom of the section at different speeds, back ones paler and slower, for a parallax sea. Each wave is an SVG tile used as a mask, so it takes your accent.

waves · light

Dot Grid Pulse Background

A quiet dot grid where rings of brighter, larger dots pulse outward from the center, like a sonar ping across graph paper. Two masked layers of dots, animated with mask-size.

grid · light · subtle

Animated Stripes Background

Wide diagonal stripes in two shades of your accent slide sideways without end, like a barber pole laid flat. One gradient tile, moved by exactly its own width each loop.

geometric · playful

Grid Beams Background

A faint grid where short beams of light shoot along the lines, down some columns and across some rows. Beams snap to the grid with round(), so they stay on the lines at any size.

grid · dark

Hexagon Background

A dark honeycomb whose lines light up as a soft glow wanders underneath, while a few cells fill and fade. The hex lines are one SVG tile used as a mask, so the glow only shows through them.

geometric · grid · dark

Radar Background

A radar screen: range rings and crosshairs, a beam sweeping around with a fading trail, and blips that flash exactly as the beam passes them. The blip delays are computed from their angles.

grid · dark · tailwind

Ripple Background

Soft rings spread from the center and fade one after another, like ripples on still water. Five layers share one keyframe with staggered delays, and only transform and opacity animate.

waves · light · subtle

Circuit Board Background

Circuit traces, vias and chips on a dark board, with pulses of light racing along the traces. The board is one SVG tile used as a mask; the pulses are dashed strokes moved with stroke-dashoffset.

geometric · grid · dark

Film Grain Background

An old footage look: fine grain that jitters every few frames, a soft vignette, a faint flicker and the odd scratch. The grain is SVG turbulence rendered once, then moved in steps.

noise · dark · subtle

Halftone Background

Print style halftone dots that swell and shrink as soft bands roll across the page. A dot gradient is multiplied with the moving bands, then filter: contrast() snaps it into crisp dots.

geometric · light

Isometric Cubes Background

A field of isometric cubes whose light slowly circles around, so the cubes seem to flip between popping out and caving in. Three masked face layers cross fade with opacity only.

geometric · dark

Topographic Background

Contour lines of a hill with two summits, drawn as hairlines on pale paper, with a slow twist rolling outward through them so the map seems to shift. Every fifth line is a bolder index contour.

geometric · light · subtle

Wave Lines Background

Five glowing sine waves in neighboring hues slide past each other and swell, tapering off at the sides like an audio visualizer. Each wave is a stroked SVG tile, masked and moved one period per loop.

waves · dark

Geometric Shapes Background

Outlined triangles, circles, squares, crosses and zigzags bob and turn in place on a dark field, each in a hue near your accent. Every shape is a tiny inline SVG with its own timing.

geometric · dark · playful

Spotlight Grid Background

A dim grid with a roaming spotlight that reveals bright lines and dots wherever it passes, no mouse tracking needed. Two registered @property percentages steer the spot on a looping path.

grid · dark

Polka Dot Background

Two polka dot layers drift diagonally in opposite directions, soft large dots behind and small crisp ones in front, for a light, playful parallax. Radial gradient tiles moved by one tile per loop.

geometric · light · playful

Zigzag Chevron Background

Bold zigzag chevrons march upward like arrows on a road, a pattern drawn with four linear gradients and no images. The layer moves one tile per loop, so the march never stutters.

geometric · light · playful

Checkerboard Background

A checkerboard whose rows slide one square at a time, alternating directions, then settle back into a perfect board like a sliding puzzle. Two conic gradient layers, each masked to every other row.

geometric · light · playful

Plus Pattern Background

A tidy grid of plus signs where every sign turns a quarter at once, easing like clockwork, while a paler offset grid turns the other way. A registered @property angle turns each sign in place.

geometric · light · subtle

Memphis Pattern Background

An 80s Memphis print of squiggles, triangles, dot grids, half circles and crosses in four colors, drifting diagonally over cream. Four masks cut one tile, each filled with a hue from your accent.

geometric · light · playful

Low Poly Background

A faceted low poly surface whose triangles catch the light one by one, so the whole sheet shimmers. Three masks with scattered opacities cross fade over a dark accent base, using opacity only.

geometric · dark

Moiré Pattern Background

Two sets of fine rings, one circling slightly off center, interfere into bold moving bands, a classic op art illusion. Only one layer rotates; the bands you see are drawn by the overlap alone.

geometric · light · tailwind

Plaid Background

A woven tartan whose warp and weft bands glide in different directions, so the checks slowly re-weave themselves, with a twill texture on top. Two striped layers multiplied together.

geometric · light

Data Stream Background

Rows of dashes stream across a dark screen at two speeds, like packets on a network bus, fading in and out at the edges. The dash rows are a generated SVG tile, masked and moved one tile per loop.

geometric · dark

TV Static Background

An old CRT tuned to nothing: coarse static that jumps every frame, dark scanlines and a bright bar rolling down the screen, tinted with your accent. The noise is SVG turbulence moved in steps.

noise · dark

Blueprint Background

Blueprint paper with a fine and a bold grid, where a technical drawing sketches itself line by line, holds, then fades for the next pass. Each stroke draws in with stroke-dashoffset and pathLength.

grid · geometric · dark

Wavy Lines Background

Rows of wavy lines ripple past each other in opposite directions, bold in front and pale behind, like a woven wave print. Each set is one small SVG tile used as a mask and moved by its own width.

waves · light · subtle

HUD Rings Background

A sci-fi heads-up display: dashed, dotted and broken rings turn at different speeds and directions around a pulsing core, over faint crosshairs. Every ring is a bordered circle that only rotates.

geometric · dark · tailwind

How to use these animated backgrounds

Each background is one element that fills its container. Give your hero or section position: relative, put the background element inside it as the first child, and lift your content above it with position: relative; z-index: 1. For a full-page background, use position: fixed on the layer instead.

To change the accent color, set --bgx-color. To change the scale of the pattern (stars, grid cells, blobs, waves), set --bgx-size: everything inside is in em. Keep text contrast in mind on busy backgrounds.

Every snippet ships with a prefers-reduced-motion rule that freezes the background for people who asked their OS for less motion. The layers animate transform, opacity and background-position, which stay smooth on large areas.

Frequently asked questions

How do I make an animated background with only CSS?

Put an oversized gradient or a few layered pseudo-elements behind your content and animate background-position or transform with @keyframes. No canvas or JavaScript is needed.

How do I animate a gradient background?

Either animate background-position on a gradient with background-size: 400%, or register the colors or angle with @property so the gradient itself can animate.

Do animated backgrounds hurt performance?

They can. Prefer animating transform and opacity on a few layers, keep large blur() areas to a minimum, and honor prefers-reduced-motion. The backgrounds here follow those rules.

How do I use it as a full-page or hero background?

Put the layer inside the hero with the hero set to position: relative, or on a position: fixed; inset: 0; z-index: -1 element for the whole page, so your content stays on top.

Can I make a moving stars or particles background without JavaScript?

Yes. Draw many dots with one element's box-shadow list or with repeating radial gradients, then move the layer in a loop. The space and particle entries above work that way.