---
title: "How to Change Background Color On Scroll in WordPress?"
url: https://nexterwp.com/docs/how-to-change-background-color-on-scroll-in-wordpress/
date: 2025-03-12
modified: 2026-03-31
author: "Aditya Sharma"
description: "Do you want to change the background color on scroll in WordPress? Changing the background color of a section on a scroll can enhance the visual appeal of your website..."
word_count: 317
---

# How to Change Background Color On Scroll in WordPress?

Do you want to change the background color on scroll in WordPress? Changing the background color of a section on a scroll can enhance the visual appeal of your website and create a memorable impact on your visitors.

With the Container block from Nexter Blocks, you can effortlessly change the background color of a section on scroll in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Container block,* [click here](https://nexterwp.com/docs/add-a-container-in-wordpress/).

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-container/)

Add the Container block with the appropriate layout to the page and follow the steps -

1. Go to **Style** > **Background Deep Layer**.

2. Select **On Scroll Animation** from the **Select Background Option** dropdown.

3. In the **item List** section, you’ll find three items by default.

4. Open an item, and in the **Background** section, you have to add either a solid background color or a gradient.

5. You have to add one more item and set a background color to see the color change effect on the scroll.

You can click on the **+ Add Item **button to add more background colors.

6. From the **On Scroll Change** dropdown, you can set the background color change effect. Here, you'll find two options.

- **Gradient Like Effect** - With this option, the colors added to the repeater items will change gradually with a transition, creating a gradient color effect as you scroll.

- **Direct Color Change Effect** - With this option, the colors added to the repeater items will change instantly as you scroll.

Select the option as per your requirements. Let’s select **Direct Color Change Effect** here.

> *Note: For the Gradient Like Effect**** ****you can set the animation duration for changing background colors from Transition Duration (s)**** ****section.*

Now, you’ll see the background color change as you scroll.