Depth 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-depthgrid">
<span></span>
</div>CSS
.nuda-depthgrid {
position: relative;
background:
radial-gradient(ellipse at center bottom, rgba(228, 255, 84, 0.15), transparent 70%),
#09090b;
perspective: 200px;
overflow: hidden;
}
.nuda-depthgrid span {
position: absolute;
left: -50%;
right: -50%;
bottom: 0;
height: 200%;
background-image:
linear-gradient(90deg, rgba(228, 255, 84, 0.3) 1px, transparent 1px),
linear-gradient(0deg, rgba(228, 255, 84, 0.3) 1px, transparent 1px);
background-size: 24px 24px;
transform: rotateX(60deg);
transform-origin: bottom;
animation: nuda-depth-scroll 1.4s linear infinite;
}
@keyframes nuda-depth-scroll {
from { background-position: 0 0; }
to { background-position: 0 24px; }
}How to use Depth 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.