Title: Blurred Header
Last modified: June 22, 2021

---

# Blurred Header

 *  [Johan Philip](https://wordpress.org/support/users/johanvarghese/)
 * (@johanvarghese)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/blurred-header/)
 * Hi!
    Kadence is a great theme! I use it on all of my client websites, I saw a
   cool look on the apple website which blurs the header as seen in this screenshot
 * [https://infernoshost.nothing-to-see-he.re/otO9Vq](https://infernoshost.nothing-to-see-he.re/otO9Vq)
   or on my personal website
    [https://infernoshost.nothing-to-see-he.re/Cvhuwn](https://infernoshost.nothing-to-see-he.re/Cvhuwn)
   here.
 * I wanna do it for this website too, I have the code, and I applied it to the 
   header and it works fine, I wanna know how I could do it for the sticky header
 * Thanks and Regards

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

 *  [hannah](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/blurred-header/#post-14589880)
 * Hey,
    Thanks for reaching out! Glad you’re enjoying Kadence! Can you post a link
   to your site?
 * Thanks,
    Hannah
 *  Thread Starter [Johan Philip](https://wordpress.org/support/users/johanvarghese/)
 * (@johanvarghese)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/blurred-header/#post-14593064)
 * [https://nettiyadan.com](https://nettiyadan.com)
 * —
    Regards Johan
 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/blurred-header/#post-14633147)
 * Hi,
    You would need to use some css like this:
 *     ```
       #masthead, #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container), #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
           background: rgba(255,255,255,.2);
           -webkit-backdrop-filter: saturate(180%) blur(20px);
           backdrop-filter: saturate(180%) blur(20px);
       }
       ```
   

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

The topic ‘Blurred Header’ is closed to new replies.

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

 * 3 replies
 * 3 participants
 * Last reply from: [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * Last activity: [4 years, 10 months ago](https://wordpress.org/support/topic/blurred-header/#post-14633147)
 * Status: not resolved