How to Design a WordPress Header Gradient

1. Visit tools.dynamicdrive.com/gradient/. This free tool helps you make a gradient image for your header. Select the gradient type you want (up/down or left/right), and set the width and height to the same as your header. Set 'Top/Left color' and 'Bottom/Right color' to the colors you want your gradient to fade into. When done, click 'Get full size image,' then right click the image that appears and save it to your computer's hard drive.
2. Log in to your WordPress account. Click 'Media,' and then click 'Add New.' Click 'Select Files,' and then locate the gradient image on your hard drive. When you upload it, copy the URL next to the 'URL' header to the clipboard.

3. Click 'Appearance,' then 'Editor.' This is the Theme Editor, which allows you to modify the HTML files for your WordPress theme.
4. Click 'header.php' from the large list of files on the right. Your aim with this file is not to make any changes, but to identify the ID of the
tag that your header is in. You can do this by looking below the
tag and finding the elements that are also in your header, such as your site's logo, or any menu bars. Then find the
tag that these are wrapped in, which may look like this:


5. Click 'style.css' from the list on the right. Scroll through the file until you locate the header. Just before the closing } bracket for this section, add the following line:background-image:URL('http://yoursite.com/path/to/image/gradient.jpg');Replace the URL with the one you copied earlier.
6. Click 'Update File.' The gradient image will now appear on your site's header.