Open menu

Animated Background Generator

Build animated website backgrounds from 13 effects, including aurora, animated gradients, mesh blobs, layered waves, starfields, snow and rain, perspective grids, patterns, film grain, bokeh, liquid blobs and a cursor spotlight. Stack up to four layers, pick a palette, check the estimated rendering cost and the contrast of your heading, then export pure CSS, a React component or a complete HTML page. Every export stops moving for people who prefer reduced motion.

Preset gallery

Build something beautiful

Estimated rendering cost: Medium. (large blur, blend modes)

Accessibility checks

  • Check Medium cost (score 3.9). Fine for a hero section; reduce blur or layers before using it full screen on low-end phones.
  • Check Where the colors are strongest, the heading drops to about 4.1:1. That's enough for large headings (3:1) but not for smaller text.
  • Pass A prefers-reduced-motion block freezes every animation into a static frame for people who ask for less motion.

Export code

.animated-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 420px;
  background: #0F172A;
}

.animated-bg .bg-l1 {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(60px);
}

.animated-bg .bg-l1 > span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.animated-bg .bg-l1 > span:nth-child(1) {
  width: 110%;
  height: 28%;
  left: 41.22%;
  top: 27.24%;
  background: radial-gradient(closest-side, #6366F1, rgba(99, 102, 241, 0));
  --tx: 6.83%;
  --ty: -11.2%;
  --r: 3.31deg;
  animation: animated-bg-l1-float 14s ease-in-out infinite alternate;
}

.animated-bg .bg-l1 > span:nth-child(2) {
  width: 110%;
  height: 28%;
  left: 28.26%;
  top: 51.4%;
  background: radial-gradient(closest-side, #EC4899, rgba(236, 72, 153, 0));
  --tx: 1.31%;
  --ty: -11.04%;
  --r: -17.76deg;
  animation: animated-bg-l1-float 18s ease-in-out infinite alternate -3s;
}

.animated-bg .bg-l1 > span:nth-child(3) {
  width: 110%;
  height: 28%;
  left: 20.51%;
  top: 7.39%;
  background: radial-gradient(closest-side, #22D3EE, rgba(34, 211, 238, 0));
  --tx: -13.46%;
  --ty: 2.68%;
  --r: -3.01deg;
  animation: animated-bg-l1-float 22s ease-in-out infinite alternate -6s;
}

.animated-bg .bg-l2 {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.12;
}

.animated-bg .bg-l2::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.75%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.5%200%200%200%200%200.5%200%200%200%200%200.5%200%200%200%201.2%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url(%23n)%27%2F%3E%3C%2Fsvg%3E") 0 0 / 220px;
  animation: animated-bg-l2-grain 0.8s steps(6) infinite;
}

.animated-bg .bg-content {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: inherit;
  padding: 2rem;
  text-align: center;
  color: #FFFFFF;
}

.animated-bg .bg-content h2 {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  line-height: 1.1;
}

@media (prefers-reduced-motion: reduce) {
  .animated-bg *,
  .animated-bg *::before,
  .animated-bg *::after {
    animation-play-state: paused !important;
  }
}

@keyframes animated-bg-l1-float {
  from {
    transform: translate3d(0, 0, 0) rotate(-8deg) scale(1);
  }
  to {
    transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--r)) scale(1.2);
  }
}

@keyframes animated-bg-l2-grain {
  0% {
    transform: translate3d(0, 0, 0);
  }
  17% {
    transform: translate3d(-4%, 5%, 0);
  }
  33% {
    transform: translate3d(-6%, -4%, 0);
  }
  50% {
    transform: translate3d(-9%, 4%, 0);
  }
  67% {
    transform: translate3d(5%, -5%, 0);
  }
  83% {
    transform: translate3d(0%, 8%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
Favourites on this device (0)

No favourites yet.

Scene & colors
Base color
Palette color 1
Palette color 2
Palette color 3
Effect layers

Editing layer 1. Layer 1 is at the back.

How to use the animated background generator

  1. Start from a preset. Filter the gallery by gradients, organic, particles, geometric, texture, interactive or layered scenes, then select Customize.
  2. Set the scene: the base color, a palette of two to five colors, an optional heading and the height.
  3. Edit the layers. Layer 1 sits at the back. Choose an effect and style for each layer, then adjust speed, density, size, blur, opacity, direction and blend mode. Use Shuffle layout to rearrange particles and blobs.
  4. Stack effects. Add up to four layers: grain over an aurora, snow over a gradient, or a spotlight over a dot pattern.
  5. Watch the meter. The note under the preview shows the estimated rendering cost and what drives it.
  6. Export CSS, the HTML markup, JavaScript (only for the spotlight), a React component, a full HTML page or SCSS.

How it works

Each layer is an absolutely positioned element inside a container with isolation: isolate, so blend modes mix only within the background. Most effects animate a pseudo-element or a few child spans:

  • Moving gradients, grids and patterns use an oversized element that shifts by exactly one tile or rotates, so the loop never jumps.
  • Aurora, blobs and bokeh are soft radial gradients that drift with transform. The layer’s blur merges them.
  • Waves are inline SVG paths repeated twice across a 200%-wide strip that slides by half its width.
  • Starfields, snow and rain are box-shadow fields: one element, hundreds of shadows, one transform.
  • Liquid blobs animate border-radius. It looks organic, but the browser repaints it every frame, so the meter rates it higher.

Performance tips

Prefer effects that only move or fade. Keep blur under 60px on full-screen layers, and use blend modes sparingly, because each one makes the browser composite more. For very long pages, you can pause the animation when the background scrolls out of view (the studio preview does this).

Worked examples

Example 1: a SaaS hero

Load Aurora with grain, keep the white heading and set the height to 560px. The cost reads Medium because of the 60px blur. Lower the blur to 40px or set the aurora’s speed to 0.5× for an even calmer effect.

Example 2: a festive banner

Load Winter snowfall. Raise the density for a blizzard, or set the direction to 200° to blow the snow sideways. It’s pure CSS, so it works anywhere you can paste a style block.

Example 3: an interactive portfolio header

Load Spotlight on dots. The JavaScript tab now contains the pointer script. Paste the HTML, CSS and script, and the light follows the visitor’s cursor. It stays centered for people who prefer reduced motion.

Common mistakes

  • Text without contrast. Moving colors can pass behind your heading. Check the contrast estimate and test the final page.
  • Too many layers. Two or three well-chosen layers usually look better and cost less than four.
  • Forgetting mobile. Phones have weaker GPUs. Test on a real device, and consider a static gradient below 600px.

Frequently asked questions

Do these backgrounds need JavaScript?

No, with one exception. Every effect is pure CSS except the cursor spotlight, which needs about ten lines of JavaScript to follow the pointer. The JavaScript tab shows the script only when your design uses it.

Will an animated background slow my site down?

It depends on the effect. Motion built from transform and opacity is cheap, because the GPU moves already-painted layers. Large blurs, blend modes and effects that repaint every frame cost more. The studio estimates the cost as Low, Medium or High and tells you what is driving it.

What happens for visitors who prefer reduced motion?

Every export includes a prefers-reduced-motion media query that pauses all animations, so those visitors see a still frame of the same design instead of motion.

How are the starfield, snow and rain made without images?

A single tiny element casts hundreds of box-shadows, one per star or flake. The whole field moves with one transform and is duplicated one tile away, so the loop is seamless.

How is the heading contrast checked?

The studio estimates the colors behind the heading by mixing each palette color over the base, according to how strongly the effect shows it. Soft, blurred and sparse effects count for less. It then reports the weakest contrast. Check the final page too, because the true backdrop changes as the animation moves.

Can I use the background in React or Next.js?

Yes. The React tab gives you a component that imports the CSS export, and it includes the spotlight hook when needed. The full-page tab gives you a standalone HTML file to test in any browser.

Sources