Animated Grid
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-anim-grid" aria-hidden="true">
<span class="nuda-anim-grid__plane"></span>
</div>CSS
.nuda-anim-grid {
position: relative;
overflow: hidden;
background: radial-gradient(ellipse at 50% 0%,rgba(228,255,84,.12),transparent 60%),#09090b;
perspective: 240px;
}
.nuda-anim-grid__plane {
position: absolute;
left: -50%;
right: -50%;
top: -20%;
bottom: -60%;
background-image: linear-gradient(90deg,rgba(228,255,84,.28) 1px,transparent 1px),linear-gradient(0deg,rgba(228,255,84,.28) 1px,transparent 1px);
background-size: 32px 32px;
transform: rotateX(62deg);
transform-origin: 50% 100%;
animation: _animGridScroll 2s linear infinite;
will-change: background-position;
}
@keyframes _animGridScroll {
from {
background-position: 0 0;
}
to {
background-position: 0 32px;
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-anim-grid__plane {
animation: none;
}
}
How to use Animated Grid
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.