Crosshatch Dither
A copy-paste noise & grain component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Noise & GrainHTMLCSSany framework
Sketch
Copy into your project
HTML
<!-- Crosshatch Dither — drifting diagonal hatch overlay -->
<div class="nuda-ng2-crosshatch">
<div class="nuda-ng2-crosshatch__lines" aria-hidden="true"></div>
<span class="nuda-ng2-crosshatch__label">Sketch</span>
</div>CSS
.nuda-ng2-crosshatch {
position: relative;
width: 100%;
max-width: 220px;
height: 130px;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(135deg,#151517,#09090b);
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
.nuda-ng2-crosshatch__lines {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(45deg,rgba(228,255,84,.16) 0,rgba(228,255,84,.16) 1px,transparent 1px,transparent 6px),repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0,rgba(255,255,255,.08) 1px,transparent 1px,transparent 6px);
pointer-events: none;
animation: _nuda-ng2crosshatch-shift 9s linear infinite;
}
.nuda-ng2-crosshatch__label {
position: relative;
z-index: 1;
font-family: ui-serif,Georgia,serif;
font-style: italic;
font-size: 19px;
color: #fafafa;
}
@keyframes _nuda-ng2crosshatch-shift {
0% {
background-position: 0 0,0 0;
}
100% {
background-position: 60px 60px,-60px 60px;
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-ng2-crosshatch__lines {
animation: none;
}
}
How to use Crosshatch Dither
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.