Dot 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-dot-grid" aria-hidden="true"></div>CSS
/* Dot Grid
Subtle animated dot grid pattern.
Customize: --dot-color, --dot-gap */
.nuda-dot-grid {
--dot-color: rgba(255, 255, 255, 0.09);
--dot-gap: 24px;
background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px);
background-size: var(--dot-gap) var(--dot-gap);
background-color: #0a0a0a;
position: relative;
overflow: hidden;
width: 100%;
min-height: 300px;
}
.nuda-dot-grid::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 50%, transparent 30%, #0a0a0a 70%);
animation: nuda-dot-glow 6s ease-in-out infinite alternate;
}
@keyframes nuda-dot-glow {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
.nuda-dot-grid::after { animation: none; }
}How to use Dot 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.