Home / Soft and Tactile UI / Frosted Aurora
Frosted Aurora CSS Template, Free with Live Demo
Free aurora gradient background template with frosted glass cards. Slow moving northern lights colors made in pure CSS. Live demo and HTML download. The example is Stillwater, a sleep and calm app.
What is frosted aurora?
Frosted aurora puts slow moving colors, like the northern lights, behind panels of frosted glass. The colors drift very gently, so the page feels alive without being busy.
It is made from a few big colored circles that are blurred heavily and moved with a long CSS animation. On top sit dark, semi transparent panels with backdrop-filter. If a visitor has asked their device to reduce motion, the colors stay still.
Good for
- Sleep, meditation and wellness apps
- Music and podcast landing pages
- Event and night life websites
- AI and tech product launch pages
What you get in this template
- Animated aurora made from three blurred shapes
- Motion turns off for people who prefer reduced motion
- Dark frosted cards for audio tracks
- Elegant Fraunces serif headline
- Frosted testimonial block
The key CSS
This is the part that makes the frosted aurora look work. Copy it into your own project.
.sky { position: fixed; inset: -20%; filter: blur(60px); z-index: -1; }
.sky span { position: absolute; border-radius: 50%;
animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(8vw, -6vw) scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
.sky span { animation: none; }
}How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
How do you make an aurora background in CSS?
Place a few large colored circles in a fixed layer, blur that layer heavily with filter: blur(60px), and move the circles slowly with a CSS animation. No images or JavaScript are needed.
Will the animated background drain phone battery?
The animation is slow and uses transform, which the browser handles well. It also stops for anyone who has reduced motion turned on in their device settings.
Can I change the aurora colors?
Yes. Change the three background colors on the .sky span elements. Greens, blues and pinks look most like real northern lights.
More Soft and Tactile UI designs
001. Glassmorphism
Harbor, a savings app landing page
002. Liquid Glass
Tidewell, a weather app screen
003. Neumorphism
Hearth, a smart home control panel
004. Claymorphism
Pebble Math, a kids learning app
006. Soft UI
Loom, a weekly planner dashboard
007. Skeuomorphism
Field Journal, a notes app
008. Tactile Buttons
Clack, a keyboard shop with a working calculator
009. Jelly UI
Wobble, a gelato shop