Scroll Color Shift
A copy-paste scroll-driven component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Scroll-DrivenHTMLCSSany framework
Scroll to shift hue
The backdrop drifts
across the spectrum
as you move
through the panel
Copy into your project
HTML
<!-- Backdrop hue shifts as the panel scrolls -->
<div class="nuda-scrollcs__scroller">
<p>Scroll to shift hue</p>
<p>...</p>
</div>CSS
/* Scroll Color Shift
The container's hue rotates with scroll progress via a scroll(self)
timeline. Animates filter only (no layout). */
.nuda-scrollcs__scroller {
background: linear-gradient(135deg, #09090b, #1a2e05);
animation: nuda-scrollcs-hue linear;
animation-timeline: scroll(self block);
}
@keyframes nuda-scrollcs-hue {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(300deg); }
}
@supports not (animation-timeline: scroll()) {
.nuda-scrollcs__scroller { filter: hue-rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
.nuda-scrollcs__scroller {
animation: none;
animation-timeline: none;
filter: none;
}
}How to use Scroll Color Shift
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.