Title: Gradient header
Last modified: July 10, 2018

---

# Gradient header

 *  Resolved [ricdam](https://wordpress.org/support/users/ricdam/)
 * (@ricdam)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/gradient-header-2/)
 * Hi there,
 * Is it possible to have a gradient header?
    Top: #00a3ef Bottom: #0b4182
 * Cheers,

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

 *  Plugin Author [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * (@oceanwp)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/gradient-header-2/#post-10481201)
 * Hello, add this css code in the custom css section of the customizer:
 *     ```
       #site-header {
           background: #00a3ef;
           background: -moz-linear-gradient(top, #00a3ef 0%, #0b4182 100%);
           background: -webkit-linear-gradient(top, #00a3ef 0%,#0b4182 100%);
           background: linear-gradient(to bottom, #00a3ef 0%,#0b4182 100%);
           filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3ef', endColorstr='#0b4182',GradientType=0 );
       }
       ```
   
 *  Thread Starter [ricdam](https://wordpress.org/support/users/ricdam/)
 * (@ricdam)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/gradient-header-2/#post-10492971)
 * Sorry I’m an idiot. What I meant was Page Title and not header.
 * Are you able to advise the code for changing the page title background to gradient
   colours?
 * Cheers
    -  This reply was modified 7 years, 9 months ago by [ricdam](https://wordpress.org/support/users/ricdam/).
 *  Plugin Author [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * (@oceanwp)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/gradient-header-2/#post-10493672)
 * Oh 🙂
    No problem at all, add this code:
 *     ```
       .page-header {
           background: #00a3ef;
           background: -moz-linear-gradient(top, #00a3ef 0%, #0b4182 100%);
           background: -webkit-linear-gradient(top, #00a3ef 0%,#0b4182 100%);
           background: linear-gradient(to bottom, #00a3ef 0%,#0b4182 100%);
           filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3ef', endColorstr='#0b4182',GradientType=0 );
       }
       ```
   

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

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

 * ![](https://ps.w.org/ocean-extra/assets/icon.svg?rev=2814940)
 * [Ocean Extra](https://wordpress.org/plugins/ocean-extra/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ocean-extra/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ocean-extra/)
 * [Active Topics](https://wordpress.org/support/plugin/ocean-extra/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ocean-extra/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ocean-extra/reviews/)

## Tags

 * [header](https://wordpress.org/support/topic-tag/header/)

 * 3 replies
 * 2 participants
 * Last reply from: [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * Last activity: [7 years, 9 months ago](https://wordpress.org/support/topic/gradient-header-2/#post-10493672)
 * Status: resolved