Color Drain
A copy-paste image effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Image EffectsHTMLCSSany framework
Copy into your project
HTML
<!-- Color Drain -->
<figure class="nuda-drain">
<img class="nuda-drain__img" src="/your-image.jpg" alt="" />
</figure>CSS
/* Color Drain
Grayscale by default; full color + slight zoom on hover.
Useful for project tiles, team grids, etc. */
.nuda-drain {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 12px;
overflow: hidden;
margin: 0;
cursor: pointer;
}
.nuda-drain__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.05);
transition:
filter 0.5s ease,
transform 0.6s ease;
}
.nuda-drain:hover .nuda-drain__img {
filter: grayscale(0) contrast(1);
transform: scale(1.04);
}How to use Color Drain
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.