Guides · · Maxwell Prehoda
11 Animated Background Examples: Auroras, Particles, Grids, Starfields and Shaders
An animated background sets the mood of a page without asking for attention. The ones that work move slowly, stay low in contrast behind text, and cost little to run: a CSS aurora that pans over a minute, a grid with a few flickering cells, a starfield drifting upward. The ones that fail are bright, fast and heavy, and they make the content harder to read.
Below are 11 animated backgrounds across the main styles (aurora, grid, particles, 3D waves, starfields, shaders and code rain), from the component libraries and tools people actually use, plus three of ours. Each one says what it is best for, what it costs to run, and comes with a live pure-CSS demo where one exists. Mesh and gradient animation has its own page: see our animated gradient examples.
1. Aceternity UI's Aurora Background: Best for light SaaS heroes that need a soft glow
Platform: React + Tailwind CSS, installed via the shadcn CLI
Aceternity's Aurora Background is described as a subtle Aurora or Southern Lights backdrop, and its motion is refreshingly simple: one keyframe moves the background position from 50% to 350% over 60 seconds, linear and infinite. A `showRadialGradient` prop fades it toward the edges so it does not fight the content.
Sixty seconds is the lesson. A background that takes a minute to cycle reads as light, not animation, so it never competes with the headline.
Our Aurora Background below is a pure-CSS version of the same idea: soft ribbons of accent-tinted light sway, stretch and tilt across the top of the page.
Watch out for: Aurora effects use large blurred gradients. Animate background-position or transform, never the blur radius, and check that text over the brightest band still meets contrast.
2. Magic UI's Flickering Grid: Best for developer-tool pages that want quiet texture
Platform: React + Tailwind CSS, installed via the shadcn CLI
A field of tiny squares where random cells brighten and dim. Magic UI exposes the knobs that matter: `squareSize` (4 by default), `gridGap` (6), `flickerChance` (0.3), `color` and `maxOpacity` (0.2). That low maximum opacity is why it works behind text: the flicker is texture, not signal.
Flickering grids suit technical brands because they suggest data and activity without a single literal icon.
Our Flickering Grid below is a pure-CSS version: small rounded squares where random cells light up and dim at different rates, without a canvas.
Watch out for: Random flicker across a whole screen can be uncomfortable for people sensitive to flashing. Keep opacity low, avoid large bright cells, and stop it under reduced motion.
3. Magic UI's Retro Grid: Best for launch pages and events with a synthwave look
Platform: React + Tailwind CSS, installed via the shadcn CLI
The scrolling perspective grid from 80s graphics, packaged as a component. Props cover the `angle` (65 degrees by default), `cellSize` (60px), `opacity` (0.5) and separate line colours for light and dark mode, and the demo sets a large gradient headline over it.
A grid floor rushing toward a horizon gives a page depth and forward motion, which is why it shows up on launch pages, hackathons and conference sites.
Our Retro Synthwave Grid Background below is a pure-CSS take on the full outrun scene: a neon grid floor rushes toward a glowing horizon.
Watch out for: Constant forward motion is one of the stronger vestibular triggers. Slow it down, keep it to the hero, and freeze it under prefers-reduced-motion.
4. particles.js and tsParticles: Best for interactive particle and network backgrounds
Platform: JavaScript, MIT; tsParticles ships framework components
Vincent Garreau's particles.js is the library behind a decade of connected-dot backgrounds, with over 30,000 GitHub stars. tsParticles is the actively maintained option today: it covers particle backgrounds, confetti and fireworks, with ready components for React, Vue, Angular, Svelte, Solid, Web Components and more.
Particle networks suit AI, data and infrastructure brands because the dots and links read as nodes and connections. Interactivity (particles that drift away from the cursor or link to it) is the reason to use a library instead of CSS.
Our Particle Network Background below is a pure-CSS take on the look without interactivity: clusters of linked dots drift and turn over a dark field.
Watch out for: Particle counts multiply cost. Start with fewer particles than the demo, cap the frame rate on mobile, and pause when the tab is hidden or the section is off screen.
5. Vanta.js: Best for 3D waves, nets and fog in a few lines of code
Platform: three.js or p5.js effects, MIT, about 120KB gzipped
Vanta inserts an animated 3D effect behind any HTML element. You load three.js and one effect file, then call something like `VANTA.WAVES('#my-background')` with options such as colour, wave height, shininess, wave speed and zoom. Effects can respond to mouse and touch, and the README puts the total added size at about 120KB minified and gzipped, mostly three.js.
It is the quickest way to a real 3D background without writing WebGL. The README's own argument is that 120KB is smaller than comparable background images or videos.
Our Layered Waves below is a pure-CSS alternative to the waves effect: four layers of waves roll along the bottom of a section at different speeds, with no three.js at all.
Watch out for: The repository's last commit is from March 2024. It works, but plan to pin versions and test new three.js releases before upgrading.
6. Aceternity UI's Shooting Stars and Stars Background: Best for night-sky heroes for AI, space and crypto brands
Platform: React + Tailwind CSS, SVG shooting stars
Two layers: a field of stars with a `starDensity` setting and optional twinkling (`allStarsTwinkle`, `twinkleProbability`), and shooting stars rendered in SVG with tunable speed (`minSpeed` 10 to `maxSpeed` 30) and a gap of 4.2 to 8.7 seconds between streaks.
That randomised delay is what keeps it alive. A meteor every few seconds, never on a beat, feels like the sky rather than a loop.
Our Shooting Stars Background below is a pure-CSS version: meteors streak diagonally across a dark, dusty sky every few seconds, each with a fading tail.
Watch out for: Streaks crossing the headline pull the eye away from it. Mask the shooting stars out of the area behind your main text.
7. Paper Shaders: Best for GPU shader backgrounds without writing GLSL
Platform: Canvas shaders, npm (@paper-design/shaders-react), Apache-2.0
Paper's open-source shader collection describes itself as "ultra fast zero-dependency shaders for your designs." The effects list reads like a background menu: grain gradient, dithering, dot orbit, dot grid, warp, spiral, swirl, waves, perlin and simplex noise, voronoi, metaballs, smoke ring and god rays, plus image filters. Install the React package and drop one in as a component.
Shaders are the right call when you want a background that CSS cannot fake, such as real noise fields, liquid warps or dithered gradients, without pulling in three.js.
Watch out for: A full-screen shader runs on every pixel every frame. Keep it to one section, lower its resolution, pause it off screen, and give it a static fallback image.
8. The Matrix digital rain: Best for developer, security and terminal-themed pages
Platform: Film reference; recreated in CSS, canvas and terminals
The falling green code first appeared in The Matrix (1999). Simon Whiteley created the custom typeface behind it, with mirrored half-width Japanese kana plus Latin letters and digits. It has been recreated everywhere since, from the GLMatrix mode in XScreenSaver to the cmatrix program for Unix terminals.
As a background it signals "code" instantly, which makes it fun for hackathons, CTF events and developer portfolios, and too much for most product pages.
Our Matrix Rain Background below is a pure-CSS version: columns of glyph marks light up as bright heads fall past and leave fading trails.
Watch out for: High-contrast falling glyphs make overlaid text hard to read. Darken the rain heavily behind content, or use it only in an empty hero.
9. Our Space Backgrounds collection: Best for starfields, galaxies and nebulae in plain CSS
Platform: Motions directory, free Ours
The Space Backgrounds collection gathers our night-sky backgrounds: parallax starfields, warp speed, twinkling stars, spiral galaxies, nebulae, black holes, eclipses and constellations. Each is HTML and CSS only, with two custom properties for colour and size and a prefers-reduced-motion guard.
The Parallax Starfield Background below is the workhorse: three layers of stars drift upward at different speeds, so the sky has depth without a single script.
Watch out for: Starfields are dark by nature. Make sure your body text colour has contrast against the darkest and the brightest parts of the field.
10. Our Grid Beams Background: Best for infrastructure and dev-tool heroes
Platform: Motions directory, free Ours
A faint grid is the most common background on technical sites; the question is how to make it feel alive without the flicker. Our Grid Beams Background sends short beams of light along the grid lines, down some columns and across some rows, like signals moving through a network.
It is one of more than a hundred entries in our Animated Backgrounds directory, which also covers waves, weather, patterns and noise, all in pure CSS.
Watch out for: Beams draw the eye wherever they travel. Keep them out of the area directly behind your headline and call to action.
11. Our Rain on Window Background: Best for calm, ambient pages like focus apps and music players
Platform: Motions directory, free Ours
Not every background has to sell a product. Our Rain on Window Background is pure atmosphere: beads of rain cling to a window over blurred city lights while bigger drops slide down.
It suits focus timers, music and podcast players, journaling apps and anything meant to be left open for hours, where a slow, natural loop is the whole point.
Watch out for: Ambient loops run for a long time. Make sure it stays cheap (check CPU in DevTools over a few minutes) and that users can pause it.
How to choose an animated background
Match it to the brand
Soft auroras and glows suit friendly SaaS. Grids and beams suit developer tools and infrastructure. Particle networks suit AI and data. Starfields suit space, crypto and anything late-night. Retro grids suit launches and events. Code rain suits hackathons and terminals. If two of these fit, pick the calmer one.
Match it to the cost
Pure CSS backgrounds (Aceternity's aurora keyframe, our directory) cost almost nothing to download. tsParticles and Vanta add a library and a canvas; Vanta's README puts it near 120KB gzipped. Shaders run on the GPU every frame. Whatever you choose, pause animation when the section is off screen and when the tab is hidden, and never let a background delay the hero's first paint. Our hero section animation examples cover that staging.
Match it to the content
Backgrounds sit behind text, so contrast comes first: test the lightest and darkest frame against your body copy. Keep motion slow (a minute per cycle is not too slow), low in opacity, and away from the headline. Under prefers-reduced-motion, freeze it on a good frame instead of removing it, so the design still holds. For moving colour fields specifically, see our animated gradient examples.
Put a background behind your hero today
Pick a style from the list, drop a pure-CSS version behind your hero, and look at it for a full minute with your real headline on top. If you notice the background before the headline, slow it down or dim it until you do not.
If you want one designed for your brand colours and layout, describe it in the creator. You get the HTML and CSS, tuned to sit behind text, with the reduced-motion freeze built in.
Make an animated background for a dark SaaS hero, full width, 640px tall. A faint hairline grid at 6% opacity, with three soft accent-coloured glows drifting slowly, each loop between 40 and 70 seconds, ease-in-out. Keep the area behind the centred headline darker than the edges so white text stays above 7:1 contrast. Pure CSS, no JavaScript, pause when prefers-reduced-motion is set by freezing on the first frame.
Common questions
How do I make an animated background with CSS?
Layer gradients or shapes in a container behind your content and animate background-position or transform with a slow, looping @keyframes rule. For example, a large gradient that pans over 60 seconds, as Aceternity's Aurora does, or layered stars that translate upward at different speeds. Our Animated Backgrounds directory has over a hundred copyable examples.
Do animated backgrounds slow down websites?
Pure CSS backgrounds that animate transform, opacity or background-position are cheap. Canvas and WebGL backgrounds (particles, Vanta, shaders) cost more CPU or GPU every frame and add download size. Pause them off screen, lower particle counts on mobile, and keep them out of the critical path.
What is the best library for animated backgrounds?
For React and Tailwind sites, Aceternity UI and Magic UI have drop-in components. For interactive particles, tsParticles. For 3D waves, nets and fog, Vanta.js. For GPU shaders, Paper Shaders. For zero dependencies, plain CSS snippets.
Are animated backgrounds bad for accessibility?
They can be if they are fast, bright, flashing or reduce text contrast. Keep motion slow and low in contrast, never flash more than three times a second, offer a way to pause motion that lasts more than five seconds, and freeze the background under prefers-reduced-motion.
How do I make a starry night background?
Use a few layers of small radial-gradient dots on a dark background and move each layer at a different speed for parallax, then add occasional twinkles or shooting stars. Our Parallax Starfield and the Space Backgrounds collection are ready to copy.