In order to use a gradient on your header background, you'll need to add some custom CSS code via the Theme Options panel.

  1. When logged into your site, hover over the Edit Page menu item in the admin bar.
  2. Click on "Theme Options"
  3. After the theme customizer loads, click on "Custom CSS"
  4. Add the code snippet below to the Custom CSS panel.
  5. Customize the left color in your gradient by changing all the instances of #333333 to your desired color HEX value.
  6. Customize the right color in your gradient by changing all the instances of #CCCCCC to your desired color HEX value.
  7. Publish your changes and close the theme options panel.
.main-header-bar {
background: #333333; /* Old browsers */
background: -moz-linear-gradient(left, #333333 0%, #CCCCCC 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #333333 0%,#CCCCCC 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #333333 0%,#CCCCCC 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#CCCCCC',GradientType=1 ); /* IE6-9 */    
}
Did this answer your question?