Blueprint 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-blueprint"></div>CSS
.nuda-blueprint {
position: relative;
background: #0a1a2e;
background-image:
linear-gradient(rgba(99, 202, 255, 0.18) 1px, transparent 1px),
linear-gradient(90deg, rgba(99, 202, 255, 0.18) 1px, transparent 1px),
linear-gradient(rgba(99, 202, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(99, 202, 255, 0.08) 1px, transparent 1px);
background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
animation: nuda-bp-drift 30s linear infinite;
}
.nuda-blueprint::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at top right,
rgba(99, 202, 255, 0.18),
transparent 60%
);
border-radius: inherit;
}
@keyframes nuda-bp-drift {
to { background-position: 40px 40px, 40px 40px, 8px 8px, 8px 8px; }
}How to use Blueprint 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.