WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Add Smooth Background Color Change Effect in WordPress

How to Add Smooth Background Color Change Effect in WordPress

Last updated on March 20th, 2018 by Editorial Staff
156 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Smooth Background Color Change Effect in WordPress

Do you want to add a smooth background color change effect on your WordPress site? You may have seen on some popular websites where the background color of a specific area or the whole web page automatically transitions from one color to another. This beautiful effect can help you get users attention and improve engagement on your website. In this article, we will show you how to easily add a smooth background color change effect in WordPress.

Adding smooth background color change effect in WordPress

What is Smooth Background Color Change Effect?

Smooth background color change effect allows you to automatically transition between different background colors. The change happens slowly going through different colors until it reaches the final color. It looks like this:

Color change effect animation

This technique is used to capture user attention with gentle effects that are pleasing to the eye.

That being said, let’s take a look at how to add this smooth background color change effect in any WordPress theme.

Adding Smooth Background Color Change Effect in WordPress

This tutorial requires you to add code in your WordPress files. If you haven’t done this before, then please take a look at our guide on how to copy and paste code in WordPress.

First, you need to find out the CSS class of the area that you want to change. You can do this by using the Inspect tool in your browser. Simply take your mouse to the area you want to change and right click to select the Inspect tool.

Find CSS class

Next, you need to write down the CSS class you want to target. For example, in the screenshot above we want to target the widget area in the bottom which has the CSS class ‘page-header’.

In the next step, you need to open a plain text editor on your computer and create a new file. You need to save this file as wpb-background-tutorial.js on your desktop.

Next, you need to add the following code inside your JS file:

jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
			colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];

            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        }); 

If you study this code, then you will notice that we have used the CSS class we want to target in the code. We have also added four colors. Our smooth background effect will start from the first color, then transition to the next color, and keep cycling through these colors.

Don’t forget to save your changes to the file.

Next, you need to upload wpb-bg-tutorial.js file to your WordPress theme’s /js/ folder using FTP. If your theme doesn’t have a js folder inside it, then you need to create one.

Upload your javascript file

After uploading your JavaScript file, it is time to load it in WordPress.

You need to add the following code to your theme’s functions.php file.

function wpb_bg_color_scripts() {    
wp_enqueue_script( 'wpb-background-tutorial',  get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ); 
 } 
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); 

This code properly loads the JavaScript file and the dependent jQuery script that you need for this code to work.

That’s all, you can now visit your website to see it in action. You will notice the smooth background color change effect in the area that you targeted.

There are many other ways to use background colors in WordPress to capture user attention or make your content pop-out. For example, you can try:

  • Add fullscreen background images
  • Add fullscreen video backgrounds
  • Random background colors on each page load
  • Add parallax effects to any WordPress theme
  • Style individual posts with different backgrounds

We hope this article helped you learn how to easily add smooth background color change effect in WordPress. You may also want to see our list of the best WordPress page builder plugins that you can try.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

156 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

6 Comments

Leave a Reply
  1. Tammy Ane says:
    Jun 6, 2018 at 12:28 am

    Supper blog. Thank you sharing . i read fully content. It is very helpful to me

    Reply
  2. Tammy Rose says:
    May 29, 2018 at 3:22 am

    I like your article very much. I want to share my website details with you please give me some information to increase performance like as your website.

    Reply
    • WPBeginner Support says:
      May 29, 2018 at 10:46 pm

      Hi Tammy,

      Please see our guide on improving WordPress speed and performance.

      Reply
  3. Alice says:
    May 3, 2018 at 1:37 pm

    Hi, this is awesome, thank you for sharing!

    Is there a way to adjust the opacity? I want to use this as an overlay over a video.

    Thanks!

    Reply
  4. Courtney Park says:
    Apr 6, 2018 at 11:05 am

    Thank you Syed. I’m very new to the blogging world and your website has helped me so much. I just wanted to shout out a big, Thank you! for you what you do.

    Reply
    • WPBeginner Support says:
      Apr 8, 2018 at 2:56 pm

      Hey Courtney,

      Thanks for the feedback, we really appreciate it. :)

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
PushEngage
PushEngage
Increase your website traffic & revenue with push notifications. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
IPVanish Coupon
Get 20% OFF on IPVanish, one of the best VPN service providers for bloggers and WordPress users.
CSS Hero Review: WordPress Design Customization Made Easy
CSS Hero Coupon
Get 40% off CSS Hero, the most powerful WordPress plugin that makes design customization easy for beginners.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.