Halftone Dots
A copy-paste noise & grain component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Noise & GrainHTMLCSSany framework
PRINT
Copy into your project
HTML
<!-- Halftone Dots — pulsing print-style dot screen -->
<div class="nuda-ng2-halftone">
<div class="nuda-ng2-halftone__dots" aria-hidden="true"></div>
<span class="nuda-ng2-halftone__label">PRINT</span>
</div>CSS
.nuda-ng2-halftone {
position: relative;
width: 100%;
max-width: 220px;
height: 130px;
border-radius: 12px;
overflow: hidden;
background: #09090b;
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
.nuda-ng2-halftone__dots {
position: absolute;
inset: 0;
background-image: radial-gradient(circle,#e4ff54 32%,transparent 34%);
background-size: 10px 10px;
opacity: .5;
mix-blend-mode: screen;
pointer-events: none;
animation: _nuda-ng2halftone-grow 5s ease-in-out infinite;
}
.nuda-ng2-halftone__label {
position: relative;
z-index: 1;
font-family: ui-sans-serif,system-ui,sans-serif;
font-weight: 800;
font-size: 18px;
letter-spacing: .08em;
color: #fafafa;
mix-blend-mode: difference;
}
@keyframes _nuda-ng2halftone-grow {
0%,100% {
background-size: 10px 10px;
opacity: .4;
}
50% {
background-size: 13px 13px;
opacity: .65;
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-ng2-halftone__dots {
animation: none;
background-size: 11px 11px;
opacity: .45;
}
}
How to use Halftone Dots
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.