Layer the light
Work with two to four individually colored ribbons over a separate horizon glow and night-sky foundation.
Light & atmosphere
Aurora Field
Compose ribbons of atmospheric light across a deep sky. Control their palette, lift, softness, and surface without a canvas loop or a heavy graphics dependency.
A quieter kind of spectacle
Build luminous backgrounds that still leave room for the page.
Aurora Field is designed for hero sections, launch pages, event identities, and ambient full-screen moments. Its motion is slow enough to support content while the layered color keeps the surface alive.
Direct natural motion
Choose drifting, rising, or breathing movement, then set travel, spread, angle, pace, and diffusion.
Export the real scene
Copy the same dependency-free HTML and CSS used by the preview, or download it as a self-contained page.
Three-step workflow
How to use the Aurora Field studio
- Choose the sky
Start with a curated atmosphere, from restrained moonlight to a vivid ion storm.
- Shape each ribbon
Set the number of layers, select their colors, and tune the motion until the composition feels balanced.
- Place it behind content
Copy the snippet into a section and adjust its minimum height, or use the standalone file as a clean prototype.
Questions, answered.
Does the aurora use WebGL or a JavaScript animation loop?
No. It is made from layered CSS gradients and transform animations, so there is no continuous JavaScript rendering loop.
Will it work as a responsive background?
Yes. The ribbons scale with their container and remain clipped inside it at desktop and mobile sizes.
What happens for visitors who prefer reduced motion?
The generated code includes a reduced-motion media query that freezes the ribbons while preserving the full layered composition.
Can I use the exported aurora commercially?
Yes. The generated markup and styling are free to use in personal and commercial work, with no watermark or attribution requirement.