Starfield
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-stars">
<span class="nuda-stars__layer nuda-stars__layer--1"></span>
<span class="nuda-stars__layer nuda-stars__layer--2"></span>
<span class="nuda-stars__layer nuda-stars__layer--3"></span>
</div>CSS
.nuda-stars {
position: relative;
width: 100%;
max-width: 200px;
height: 120px;
border-radius: 12px;
overflow: hidden;
background: radial-gradient(ellipse at center,#1a1a20 0%,#09090b 100%);
}
.nuda-stars__layer {
position: absolute;
inset: 0;
background-repeat: repeat;
background-image: radial-gradient(1px 1px at 20% 30%,#fafafa,transparent),radial-gradient(1px 1px at 60% 70%,#fafafa,transparent),radial-gradient(2px 2px at 80% 20%,#fafafa,transparent),radial-gradient(1px 1px at 40% 80%,#fafafa,transparent),radial-gradient(1px 1px at 90% 50%,#fafafa,transparent);
animation: _starsDrift 30s linear infinite;
}
.nuda-stars__layer--2 {
opacity: .6;
animation-duration: 50s;
animation-direction: reverse;
}
.nuda-stars__layer--3 {
opacity: .3;
animation-duration: 80s;
}
@keyframes _starsDrift {
from {
transform: translate(0,0);
}
to {
transform: translate(-50px,30px);
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-stars__layer {
animation: none;
}
}
How to use Starfield
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.