Lifetime updates on every purchase Support replies within 24 hours Secure checkout via Gumroad 8,500+ sales since 2016
Shop themes

Smooth Background

Overview

Smooth background and text color transitions, on a timer, on scroll, or section by section. One tiny script, no dependencies.

Features

Three modes

Choose from loop, scroll or sections, depending on how you want the colors to move.

Perceptual color mixing

Colors blend the way the eye sees them, so transitions never turn muddy.

Many properties at once

Animate background, text, borders and CSS variables together. Gradients work too.

Light and dark sections

Add a class to any section and it goes on the page while that section is active.

Easy setup

Configure it with data attributes, no code needed, or use the full JavaScript API.

Accessible

It respects the visitor's reduced-motion setting and works under a strict CSP.

Lightweight

Pure JavaScript, no jQuery, about 7 KB gzipped, with TypeScript definitions included.

Buy with confidence

6mo Support included Extendable to 12 months
∞ Lifetime updates No renewals or subscriptions
✓ Reviewed Quality-checked by Envato

Specifications

Highlights

Browsers

  • Chrome
  • Firefox
  • Safari
  • Edge

Files included

  • JS

Changelog

2.0.0Latest · Oct 7, 2026 Show changelogHide changelog
  1. 2.0.0 Latest
    • Newscroll mode with smooth interpolation, container and trigger support.
    • Newsections mode, with data-sbg-class and activeClass for manual light/dark styling.
    • Newseveral properties per palette entry, CSS custom properties and gradients.
    • NewOKLab / OKLCH interpolation with gamut mapping and premultiplied alpha.
    • Newhold, direction, iterations, easing presets and cubic-bezier().
    • Newplay, pause, toggle, goTo, update, refresh, callbacks and DOM events.
    • Newdata attribute auto-init, TypeScript definitions, ESM/CJS/browser builds.
    • Newprefers-reduced-motion support, off-screen pause, CSP-friendly rendering.