Home / Color and Light / Aurora Gradient
Aurora Gradient CSS Template, Free with Live Demo
Free aurora gradient website template for a skincare brand. Soft flowing pastel colors on a light background, animated with one CSS conic gradient. Live demo. The example is Solace, a skincare brand.
What is aurora gradient?
An aurora gradient is a soft, slowly moving wash of color, like the northern lights seen through fog. On a light background it feels fresh and calm, which suits beauty, wellness and lifestyle brands.
The whole effect is one conic gradient, blurred heavily and rotated very slowly. A fade at the bottom blends it into the page, so the products below sit on clean white.
Good for
- Skincare and beauty brands
- Wellness and health apps
- Fashion and lifestyle shops
- Soft product launch pages
What you get in this template
- One blurred conic gradient that turns every 30 seconds
- Fade into white so content stays clear
- Rounded product cards with matching gradients
- Gowun Batang serif for a gentle feel
- Animation stops for reduced motion
The key CSS
This is the part that makes the aurora gradient look work. Copy it into your own project.
.aur::before {
content: ""; position: absolute; inset: -30%;
background: conic-gradient(from 180deg, #b8f3e3, #c7d2ff, #ffd6e8, #fff1c2, #b8f3e3);
filter: blur(70px);
animation: spin 30s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.aur::after { content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, #fbfaff); }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 is this different from the frosted aurora template?
Frosted aurora (number 005) is dark, with glass panels on top. This one is light and pastel, made from a single rotating conic gradient, and fades into a white page.
How do you animate a gradient smoothly in CSS?
Gradients themselves animate poorly, so rotate the element that holds the gradient instead. A blurred conic gradient turning slowly looks like flowing color.
Does the animation slow the page down?
No. It only uses transform, which the browser handles on the GPU.
More Color and Light designs
042. Duotone
Harbor Film Festival
043. Monochrome
Atelier Verde, an architecture studio
044. Dark Mode First
Ledgerly, a budget app
045. Neon Cyberpunk
Voltage Arena, an esports tournament
046. Earthy Natural
Rootstock Farm, an organic veg box
047. Pastel Dream
Cloud Nine, a baby clothing shop
048. High Contrast Accessible
Brookfield Council, a local government site
049. Grainy Gradient
Late Signal, a podcast