Free tool · beUI Studio · Light

Animated Aurora Background

Curtains of light that shimmer and drift like the northern lights. Aurora is a favorite backdrop for modern product and AI sites.

Design it in your browser, tune the colors and motion, and export it as React source, a PNG, or a WebM video.

Static preview. Open it in Studio to see it move and edit it live.

Where it works

  • AI, SaaS, and startup landing page heroes
  • Dark-mode product pages
  • Waitlist and coming-soon pages

Tip: Pair aurora with a dark base color and a single bright accent so the light bands stay luminous.

Make it yours

Pick your own palette, then adjust the shader and finish. Stack effects on top for a retro, glitch, or print look.

Settings

  • Speed
  • Scale
  • Detail
  • Distortion
  • Glow
  • Grain
  • Vignette
  • Brightness
  • Contrast
  • Saturation
  • Hue

Effects

  • Pixelate
  • Dither
  • Posterize
  • Edge glow
  • Pixel sort
  • LED
  • RGB split
  • Glitch
  • Scanlines
  • Grain
  • Duotone

Export options

React source

A standalone React component with your shader, colors, and motion settings, ready to paste into a Next.js or Vite app.

PNG image

A still frame at the size you choose, for social images, email headers, slides, or a lightweight fallback.

WebM video

A looping video for places that can't run WebGL, such as social posts, presentations, and some site builders.

Frequently asked questions

Is the aurora background generator free?
Yes. beUI Studio is free to use in your browser, including exporting React source, PNG images, and WebM videos.
How do I add an animated aurora background to a React app?
Open the background in Studio, adjust it, then export React source. Paste the component into your project and render it behind your content, for example as the first child of a hero section.
Will an animated WebGL background slow down my site?
It uses the GPU, so keep it to one background per view, avoid full-resolution canvases on low-power devices, and use the PNG export as a fallback for visitors who prefer reduced motion.
Can I change the colors to match my brand?
Yes. Every background takes your own palette, and you can tune speed, scale, detail, distortion, glow, grain, and color adjustments before exporting.

More light backgrounds