Title: Gradient header
Last modified: August 21, 2016

---

# Gradient header

 *  [jibinpjoy](https://wordpress.org/support/users/jibinpjoy/)
 * (@jibinpjoy)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/gradient-header/)
 * Hai friends,
 * How can I give a gradient header background for my website?
 * Thanks in Advance..

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/gradient-header/#post-4208817)
 * Start with this [snippet ](http://www.themesandco.com/snippet/change-customizr-background-to-texture-or-image/)
   to change the Header Background.
 * I’ll try to work out a better solution for the gradient.
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/gradient-header/#post-4208821)
 * OK, change the black/white to what you need:
 *     ```
       header.tc-header {
       background-image: linear-gradient(to bottom, white, black);
       background-repeat: repeat-x;
       }
       ```
   
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/gradient-header/#post-4208822)
 * That’s a generic solution and needs to be extended for browser support.
 * Different patterns can be achieved too.
 * See [here](http://css-tricks.com/examples/CSS3Gradient/).
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/gradient-header/#post-4208823)
 * So here’s a better solution:
 *     ```
       background-image: -moz-linear-gradient(top, red, blue);
       background-image: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
       background-image: -webkit-linear-gradient(top, red, blue);
       background-image: -o-linear-gradient(top, red, blue);
       background-image: linear-gradient(to bottom, red, blue);
       background-repeat: repeat-x;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='red' , endColorstr='blue' , GradientType=0);
       ```
   
 * Change red/blue to what you want.
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/gradient-header/#post-4208829)
 * Now included in this [Snippet](http://www.themesandco.com/snippet/change-customizr-background-to-texture-or-image/)

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Gradient header’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png)
 * Customizr
 * [Support Threads](https://wordpress.org/support/theme/customizr/)
 * [Active Topics](https://wordpress.org/support/theme/customizr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/customizr/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * Last activity: [12 years, 7 months ago](https://wordpress.org/support/topic/gradient-header/#post-4208829)
 * Status: not resolved