Smooth Background — JavaScript Color Transition Plugin

Beautiful Color Transitions. Zero Dependencies.

Bring your website to life with smooth, dynamic color transitions.

Smooth Background is a lightweight JavaScript plugin that animates background colors, text colors, borders, CSS custom properties, and gradients. Create subtle visual effects, immersive scrolling experiences, and seamless transitions between light and dark sections — without adding heavy libraries to your project.

One tiny script. Endless creative possibilities.

✨ What You Can Create

• Animated Backgrounds — Build smooth, continuously changing color backgrounds for hero sections, landing pages, and interactive websites.
• Scroll-Based Effects — Let colors evolve as visitors scroll through your page.
• Section Transitions — Switch styles as users move between page sections, including light and dark modes.
• Text & Border Animations — Animate multiple CSS properties together for a consistent visual experience.
• Gradient Transitions — Create fluid color changes with gradient backgrounds and CSS custom properties.

Key Features

Three Animation Modes

Choose the behavior that fits your design:

• Loop — Continuously cycle through a color palette.
• Scroll — Interpolate colors based on scrolling.
• Sections — Apply classes and styling as sections become active.

Perceptually Smooth Color Mixing

Smooth Background uses modern OKLab and OKLCH color interpolation to create more natural-looking transitions and reduce muddy intermediate colors.

Flexible Animation Controls

Customize duration, delay, direction, easing, iteration count, and more. Use built-in easing presets or your own cubic-bezier() curve.

Multiple CSS Properties

Animate backgrounds, text, borders, CSS custom properties, and gradients within the same palette entry.

Easy Setup

Get started with HTML data attributes and automatic initialization, or use the JavaScript API for complete control over your animations.

Developer-Friendly API

Control animations programmatically with methods such as play, pause, toggle, goTo, update, and refresh. Use callbacks and DOM events to integrate animations into your workflow.

Lightweight & Dependency-Free

• Pure JavaScript — no jQuery required.
• Approximately 7 KB gzipped.
• TypeScript definitions included.
• ESM, CommonJS, and browser builds.

Accessibility & Performance

• Respects the visitor’s reduced-motion preference.
• Pauses animations when appropriate for off-screen elements.
• Designed to work with strict Content Security Policy (CSP) environments.

Responsive & Retina Ready

Designed for modern websites across supported desktop and mobile browsers.

Perfect For

• Creative and portfolio websites
• Agency and studio landing pages
• SaaS and product websites
• Interactive storytelling
• Scroll-driven experiences
• Dynamic hero sections
• Light and dark section transitions
• Custom web design projects

Whether you’re building a minimalist portfolio or an expressive landing page, Smooth Background gives you the tools to create polished color transitions with minimal overhead.

What’s Included

• Smooth Background JavaScript plugin
• Browser-ready build
• ESM and CommonJS builds
• TypeScript definitions
• Online documentation

⚙️ Compatibility

Works with modern versions of:

• Chrome
• Firefox
• Safari
• Microsoft Edge

No jQuery or additional runtime dependencies required.

Documentation

Get started with the installation guide, configuration options, animation examples, styling instructions, methods, and events.

Documentation: https://vlthemes.me/docs/smooth-background/

Ready to Make Your Website Feel More Alive?

Add Smooth Background to your toolkit and start creating beautiful, fluid color transitions with just a little JavaScript.

Get Smooth Background today.