Aurora
A copy-paste backgrounds component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
BackgroundsHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-aurora" aria-hidden="true">
<div class="nuda-aurora__wave nuda-aurora__wave--1"></div>
<div class="nuda-aurora__wave nuda-aurora__wave--2"></div>
<div class="nuda-aurora__wave nuda-aurora__wave--3"></div>
</div>CSS
/* Aurora
Aurora borealis color waves.
Customize: wave colors and blur */
.nuda-aurora {
position: relative;
overflow: hidden;
background: #050510;
width: 100%;
min-height: 300px;
}
.nuda-aurora__wave {
position: absolute;
width: 200%;
height: 50%;
left: -50%;
filter: blur(40px);
opacity: 0.35;
border-radius: 50%;
will-change: transform;
}
.nuda-aurora__wave--1 {
background: linear-gradient(90deg, #06b6d4, #6366f1, #06b6d4);
top: 20%;
animation: nuda-aurora-sway 7s ease-in-out infinite alternate;
}
.nuda-aurora__wave--2 {
background: linear-gradient(90deg, #8b5cf6, #ec4899, #8b5cf6);
top: 30%;
animation: nuda-aurora-sway 9s ease-in-out infinite alternate-reverse;
}
.nuda-aurora__wave--3 {
background: linear-gradient(90deg, #22c55e, #06b6d4, #22c55e);
top: 40%;
animation: nuda-aurora-sway 11s ease-in-out infinite alternate;
}
@keyframes nuda-aurora-sway {
0% {
transform: translateX(-20%) scaleY(0.8) rotate(-3deg);
}
100% {
transform: translateX(20%) scaleY(1.2) rotate(3deg);
}
}
@media (prefers-reduced-motion: reduce) {
.nuda-aurora__wave { animation: none; }
}How to use Aurora
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.