Using gradient backgrounds in WordPress is one way to standout of the competition and you can do it very easily using CSS, Cascading Style Sheets.

Gone are the days when designers have to use design software like Photoshop to do such tasks.

We will see methods to generate css gradient background colors for WordPress and use them using div classes in WordPress. More information on this later.

We will also some common WordPress gradient errors and fixes which you may face.

Always check your theme options first in dashboard Appearance > Customize to check if you can change background color using gradients. Woopoo's Tip

CSS Gradient Generator

To start, the first thing we need is a css gradient background and we will get one using css gradient background generator. We will discuss two easy options here.

ColorZilla is an ultimate gradient color generator and very easy to use. Above all it’s totally free.

Visit the website and make a gradient background of your choice. From orientation, you can choose different options like horizontal, vertical, diagonal gradient and radial gradient.

From the CSS section, copy all the code in notepad or a text editor. We will use it later on.


Another very popular css gradient creator is uiGradients. Just visit the website and select your option from literally hundreds of options.

On the upper right hand side are the menu options. For example, click the Rotate gradient icon to change css gradient angle.

Once done, click the Get css button from the menu, looks like < >, press Click to Copy button and save this code in a notepad.
ui gradients copy css
Our next step is to use this gradient in WordPress so let’s move forward and see how we can do it.

WordPress Gradient Plugin

In WordPress gradient background plugin we use is SiteOrigin CSS. The plugin is free and can be used for a number of other purposes like changing text styles and layouts but we will keep our focus limited to change background colors only using SiteOrigin CSS plugin.
1. From dashboard, install the plugin first and Activate it.
site origin css plugin
2. Once installed, go to Appearance > Custom CSS
site origin css plugin
3. Click the Preview button by clicking the eye button
site origin css preview
4. Three tabs will appear on the left bar mainly Text, Decoration and Layout. Our business lies in Decoration tab, click it.
site origin css decoration
The settings are dependent on what is selected on the right hand side. Move your cursor here and there on the right hand side, which is essentially your blog preview, and you will see different parts are highlighting, move your cursor on an open background area and click it.

On the top left corner, CSS property #main-content will appear in drop down. This CSS property could be different for you according to the theme you are using.

Change Background Color to any color. We will finally replace it afterwards. Click the small tick button to apply the changes.

05. As you saved the changes, the CSS code will appear in the main section. We need to change this code because we don’t want a solid background color.
site origin css code

06. Remember we saved our gradient css code in notepad? Now is the time to use it.

Replace the code with what you have saved in notepad. Click Save CSS

site origin css gradient code
That’s pretty much it. You have already done it. Visit your blog and refresh your browser to view the all pretty gradient.
If #main-content is not there in your theme, look for CSS like #content, #container, #main-container or something similar. Woopoo's Tip

WordPress Gradient Without Plugin

Adding gradient to WordPress background without plugin is a bit trickier and needs a bit of coding.

We will see how to do it using Chrome browser but same procedure can be followed using other browsers as well.

1. Right-click on your blog front page and from the menu, click Inspect or press Ctrl+Shift+I

chrome browser inspect

2. In the code window, look for a div with class id something like #content, #container, #main-container.

Different themes have different class ids so you have to find this container class yourself. Once you find it, note it down in a notepad or text editor. We will use it later on.

chrome browser inspect
3. Now switch to WordPress Dashboard and go to Appearance > Customize > Additional CSS
wordpress css
4. Enter the following code and replace #main-content with your own class.

gradient code goes here

5. Click Save & Publish and to save the result.

Visit your blog’s front page and refresh your browser. You should see your gradient in the background.


Gradient Styles List

Below is a gradient list for WordPress you can use. The list contains all appealing and most contemporary color combinations you will see all around internet so we have collected most of them in one place.

Just replace the gradient numbers in css code and instantly change your WordPress blog background color.





we are working on the rest of the massive CSS colors library which will be available soon. Please check back soon.

Gimme a Share pleeeaase!

Pin It on Pinterest

Share This