Background Color Change on Scroll — CSS Examples

Q: How do I change background color on scroll?

With CSS: add scroll-timeline-name to the scroll container, then animate a background element using multi-stop @keyframes linked to that timeline via animation-timeline. With JavaScript: use IntersectionObserver to detect when each section enters the viewport and update the body background color with a CSS transition.

Q: How to change background color based on scroll position CSS?

Use scroll-timeline-name on the scroll container and reference it with animation-timeline on a fixed background element. Write @keyframes with color stops at 0%, 25%, 50%, 75%, 100%, each stop corresponding to a section's background color. CSS interpolates smoothly between stops as you scroll.

Q: How to make smooth background color transition on scroll?

For CSS: the interpolation between @keyframes stops is automatic and smooth. For JavaScript: add transition: background 0.8s ease to the element being updated, then change its background when a new section enters the viewport via IntersectionObserver. The CSS transition handles the smooth interpolation.

CSS Background Change with scroll-timeline

The scrollable container has scroll-timeline-name: --bgc-tl and its background is animated with multi-stop @keyframes linked via animation-timeline, all pure CSS. The background smoothly transitions between colors as you scroll through sections.

Section 1 — Blue

Scroll to see the background color change smoothly.

Section 2 — Green

The background transitions to green.

Section 3 — Amber

CSS interpolates smoothly between color stops.

Section 4 — Purple

Change the palette to see different color themes.

Section 5 — End

100% scroll. All pure CSS, no JavaScript needed.

Easing

The viewport background uses 5 keyframe stops with @keyframes. CSS automatically interpolates between colors as scroll advances.

JavaScript Background Change with IntersectionObserver

Each section has a data-bg-color attribute. An IntersectionObserver fires when a section enters the viewport, updating the viewport's background property. A CSS transition smoothly interpolates between colors. Works in all modern browsers (97%+ support), no CSS scroll-timeline needed.

Section 1

The viewport background shifts when this section enters view.

Section 2

IntersectionObserver fires at 50% visibility.

Section 3

CSS transition smoothly interpolates between colors.

Section 4

Adjust the transition speed with the slider on the right.

Section 5

Universal browser support: Chrome, Firefox, Safari, Edge.

Transition Speed 0.8s

0.1s2.0s

Uses IntersectionObserver at 50% threshold. The CSS transition: background Xs ease on the container handles the smooth interpolation.

Take It Further with fullPage.js

Get production-ready background transitions with scroll snapping, touch support, and keyboard navigation out of the box.

Loading preview...

Transition Speed 0.8s

Easing

Scroll Speed 700ms

fullPage.js adds

✓ Scroll snapping
✓ Callbacks & events
✓ 60fps performance

Get fullPage.js →

How Background Color Change on Scroll Works

The CSS approach uses a named Scroll Progress Timeline on the scroll container. The same container's background is animated with multi-stop @keyframes linked to that timeline via animation-timeline. As scroll progress advances from 0% to 100%, the background shifts through each color.

CSS automatically interpolates between keyframe stops, so if stop 0% is blue and stop 25% is green, the background smoothly transitions through cyan as you scroll between sections. Sections are transparent so the animated background shows through.

/* Scroll container with timeline + animated background */
.page {
  overflow-y: scroll;
  scroll-timeline-name: --page-scroll;
  scroll-timeline-axis: block;
  animation: bgCycle linear both;
  animation-timeline: --page-scroll;
}

/* Background shifts through colors as you scroll */
@keyframes bgCycle {
  0%   { background: #0d1b4d; } /* Section 1: blue   */
  25%  { background: #064e3b; } /* Section 2: green  */
  50%  { background: #451a03; } /* Section 3: amber  */
  75%  { background: #3b0764; } /* Section 4: purple */
  100% { background: #1e3a5f; } /* Section 5: navy   */
}

CSS @keyframes vs JavaScript

	CSS scroll-timeline	JavaScript (IntersectionObserver)
Browser support	Chrome, Edge, Safari 26+	All browsers (97%+)
Smooth interpolation	Automatic between keyframe stops	CSS transition on container
Scrubs backward on scroll-up	Automatic	On re-entry (threshold-based)
Section-precise control	Percentage-based stops	Per-section data attributes
Performance	Compositor thread	Main thread (lightweight)
Code size	CSS only	~15 lines JS

FAQ

How do I change background color on scroll?

With CSS: set scroll-timeline-name on the scroll container and animate a background element with multi-stop @keyframes via animation-timeline. With JavaScript: use IntersectionObserver to detect when sections enter the viewport and update the background with a CSS transition for smooth interpolation.

How to change background color based on scroll position CSS?

Add scroll-timeline-name: --tl to the scroll container. On a fixed background element, set animation-timeline: --tl and write @keyframes with color stops at 0%, 25%, 50%, 75%, 100%, matching each section. CSS interpolates between stops automatically as you scroll.

Can I animate background color with CSS scroll-driven animations?

Yes. CSS scroll-driven animations can animate any animatable property, including background-color, background gradients, and color. Write the color transition in @keyframes and link it to a scroll timeline. Works in Chrome 115+, Edge 115+, and Safari 26+.

How to make smooth background color transition on scroll?

For CSS: the interpolation between @keyframes stops is automatic. For JavaScript: add transition: background 0.8s ease to the element you are updating, then change its background when a section enters the viewport via IntersectionObserver. The CSS transition handles smooth interpolation.