---
title: "Background Changer — Free Framer component · Best of Framer"
description: "Free Framer component · by Eduardo Casarini · Backgrounds. Background Changer is a lightweight UI component that changes your site's background color as visitors scroll through your content."
canonical: "https://framer.elliotli.dev/component/background-changer"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Background Changer

# Background Changer

Your site's mood, one scroll at a time.

[View on Framer](https://framer.com/marketplace/components/background-changer/?via=elliot-li)

![Background Changer preview image 1](https://framer.elliotli.dev/og/component/background-changer/9e2fdd7f0e1852a8/1600x1200.jpg)

## Summary

Background Changer is a lightweight UI component that changes your site's background color as visitors scroll through your content.

## Description

## Background Changer

Background Changer is a lightweight UI component that changes your site's background color as visitors scroll through your content. Place it once on your page and configure your colors inside the Scroll Variant effect. Each section gets its own atmosphere, while your content stays exactly where it should be.

### Effortless Setup

Simply place Background Changer as a fixed component on your page and set it to 100vh. It sits behind all your content, so there is no need to color or style your sections individually. Open the Scroll Variant effect, select the section and the color you want, and the component takes care of the rest.

### Unlimited Color Freedom

Your palette can be as large as you want. Add as many colors as you need, then use the Scroll Variant effect to assign each one to a specific section, telling Background Changer exactly when to change and what color to shift to. The result is a smooth, cinematic atmosphere that moves with your content.

### Key Benefits

-   Background color changes triggered by vertical scroll
    
-   Fixed 100vh placement keeps Background Changer always in the background
    
-   Supports unlimited color stops across any number of sections
    
-   Works with Framer's native Scroll Variant effect
    
-   No need to style or color individual sections manually
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #700

## Details

- **Author**: Eduardo Casarini
- **Published**: 2026-04-09
- **Updated**: 2026-07-03
- **Added**: 2026-03-31
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background