How to Make a Wordpress Gradient Background

Written by sara williams
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Make a Wordpress Gradient Background
Use CSS to create gradient backgrounds for your Wordpress blogs. (Jupiterimages/Pixland/Getty Images)

Because Cascading Style Sheet, or CSS, code includes gradients, you can add CSS-only gradient backgrounds to your websites without any need for sliced images. In Wordpress, you can add CSS gradient backgrounds to your style.css file. You cannot apply the gradient to the body tag as you do for solid backgrounds, but you can use a div that wraps around the entire website. Many themes built on CSS frameworks already include such a div, though you can add one if your theme does not.

Skill level:


  1. 1

    Go to the "wp-admin" directory of your website and log in to the Wordpress dashboard. Navigate to "Appearance" and click the "Editor" link. Click the link to "header.php" under the "Templates" heading to load the HTML file containing your website's body tag.

  2. 2

    Look for a div with an ID of "container" directly below the body tag in your "header.php" file. If you do not find one, add one. Here is what it should look like:

    <div id="container">

    Save the file by clicking the blue "Update File" button. If you added a div, load "footer.php" in the editor and add "</div>" directly above "</body>" to close the div.

  3. 3

    Load "style.css" in the editor. Add this code to the very bottom of the file:

    container {

    background-colour: #038394;

    background-image: linear-gradient(top, #038394, #00CCCC);

    background-image: -webkit-linear-gradient(top, #038394, #00CCCC);

    background-image: -moz-linear-gradient(top, #038394, #00CCCC);


    The above code sets a fallback for browsers that do not support gradients. Setting "background-image" to "linear-gradient" creates the gradient background. At the least, you need to set a direction for the gradient to start at and then two colours that fade into each other. Add that line of code again two times, adding the Webkit and Mozilla prefixes for Chrome, Safari and Firefox browsers.

  4. 4

    Click the blue "Update File" button to save your "style.css" file. Your gradient background now appears on every page of your Wordpress website.

Tips and warnings

  • Set all margins to zero for your "container" div if you see white space around your gradient.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.