Free tool · beUI Studio · Light
Animated Bloom Field Background
A field of soft glowing points that brighten and fade. It feels like bokeh or distant city lights, adding depth to dark layouts.
Design it in your browser, tune the colors and motion, and export it as React source, a PNG, or a WebM video.
Where it works
- Night-themed and dark-mode pages
- Finance and fintech marketing sites
- Hero sections with floating UI cards
Tip: Blur and soften the bloom when cards sit on top so the background stays behind them.
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 bloom field 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 bloom field 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.