Gradient Wave
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-grad-wave" aria-hidden="true"></div>CSS
.nuda-grad-wave {
position: relative;
overflow: hidden;
background: linear-gradient(120deg,#09090b 0%,#13160b 25%,#e4ff5433 45%,#13160b 65%,#09090b 100%);
background-size: 300% 300%;
animation: _gradWave 12s ease-in-out infinite;
will-change: background-position;
}
.nuda-grad-wave::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(60deg,transparent 0%,rgba(98,182,255,.12) 50%,transparent 100%);
background-size: 300% 300%;
animation: _gradWave 16s ease-in-out infinite reverse;
mix-blend-mode: screen;
}
@keyframes _gradWave {
0%,100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-grad-wave,.nuda-grad-wave::after {
animation: none;
}
}
How to use Gradient Wave
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.