What it looks like
Picture the northern lights seen through a fogged window. Diagonal bands of blue, indigo and lilac repeat and slide slowly sideways in a 60-second loop, with a soft blur that melts their edges. A radial mask concentrates the glow in the top right corner and keeps the rest of the area clean for text. In dark mode the bands sit on a near-black backdrop; in light mode, on an off-white gray. Whatever you place inside the component is centered on top, and the section fills the height of the screen.
You may be looking for this if you asked for something like
- a background with colorful light slowly moving behind the headline
- a northern lights background for my landing page
- an animated blue and purple gradient that will not slow the site down
- a nice hero background for my SaaS without using 3D
- an aurora effect at the top of the site
- a subtle animated background that works in dark mode
Also known as
- drifting light bands
- northern lights background
- animated gradient background
- aurora borealis effect
- moving gradient backdrop
When to use
- A SaaS or digital product hero that needs a refined mood
- Login or sign-up screens that should not feel plain
- Company pages where a WebGL effect would be overkill
- Launch sections with a short, large headline
When to avoid
- Areas with long body text, where the bands get in the way of reading
- Brands with a warm palette, unless you change the component colors
How to ask your AI
Create a CSS-only northern lights background behind the homepage headline: light bands in my brand colors drifting slowly, with a soft blur and a static version for people who prefer reduced motion.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Névoa
Will Névoa slow down my site?
Usually not. Névoa uses only gradients, blur and a CSS animation, with no WebGL and no animation JavaScript, so it is rated Light in THM Componentes. On older phones the blur is the most demanding part, so it is worth checking LCP before and after adding it.
Can I change the aurora colors?
Yes. Névoa keeps its colors in CSS variables, and the THM Componentes prompt tells your AI to replace the blue and violet tones with your project color tokens. It works in light and dark mode, with the backdrop and the bands adjusted for each.
Does Névoa respect reduced motion settings?
The original component always animates. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion in their system settings, which is simple with Névoa: pause the CSS animation and keep the gradient still.
