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.
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.
WordPress Gradient Plugin
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.
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
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
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.
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.