Mesh Gradient
A copy-paste animated gradients component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Animated GradientsHTMLCSSany framework
Copy into your project
HTML
<!-- Mesh Gradient -->
<div class="nuda-gradient-mesh" role="img" aria-label="Mesh gradient"></div>CSS
.nuda-gradient-mesh {
width: 240px;
height: 140px;
border-radius: 14px;
background: #09090b;
background-image: radial-gradient(40% 50% at 20% 30%,#e4ff54 0%,transparent 60%),radial-gradient(45% 55% at 80% 25%,#a855f7 0%,transparent 60%),radial-gradient(50% 60% at 30% 80%,#22d3ee 0%,transparent 60%),radial-gradient(45% 50% at 75% 75%,#fb7185 0%,transparent 60%);
filter: blur(10px);
animation: nuda-gradient-mesh-shift 12s ease-in-out infinite alternate;
}
@keyframes nuda-gradient-mesh-shift {
0% {
background-position: 0% 0%,100% 0%,0% 100%,100% 100%;
}
50% {
background-position: 30% 20%,70% 30%,20% 70%,80% 60%;
}
100% {
background-position: 10% 30%,90% 10%,30% 90%,60% 80%;
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-gradient-mesh {
animation: none;
}
}
How to use Mesh Gradient
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.