---
title: "How to Change Background Color On Scroll in WordPress?"
url: https://qa.nexterwp.com/docs/how-to-change-background-color-on-scroll-in-wordpress/
date: 2025-03-12
modified: 2026-04-14
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?

## Key Takeaways

- Nexter Blocks' Container block enables background color changes on scroll in WordPress.
- Users select 'On Scroll Animation' from the 'Select Background Option' dropdown to configure background effects.
- Two options for background color change effects include 'Gradient Like Effect' and 'Direct Color Change Effect'.

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://qa.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://qa.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.