Aurora
A copy-paste animated gradients component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Animated GradientsHTMLCSSany framework
Copy into your project
HTML
<!-- Aurora Gradient -->
<div class="nuda-gradient-aurora" role="img" aria-label="Aurora gradient"></div>CSS
.nuda-gradient-aurora {
width: 240px;
height: 140px;
border-radius: 14px;
background: #09090b;
position: relative;
overflow: hidden;
}
.nuda-gradient-aurora::before {
content: "";
position: absolute;
inset: -40%;
background: conic-gradient(from 0deg at 30% 40%,#e4ff54,transparent 25%,#4ade80 45%,transparent 65%,#22d3ee 85%,#e4ff54);
filter: blur(28px);
opacity: .85;
animation: nuda-gradient-aurora-drift 9s ease-in-out infinite alternate;
}
@keyframes nuda-gradient-aurora-drift {
0% {
transform: translate3d(-10%,-6%,0) rotate(0deg) scale(1.2);
}
100% {
transform: translate3d(12%,8%,0) rotate(40deg) scale(1.4);
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-gradient-aurora::before {
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.