Shop
New book · Instant download The 1-Person Media Company

The complete bundle: the 114-page book, all 11 worksheets, the prompt library, the 50 Ideas Decision Sheet, quote...

₹299.00₹1,499.00
Buy now Visit shop
Sign in

GeneratePress animated RGB header shadow: tested CSS

Add a red-green-blue glow under your GeneratePress navigation with a few lines of CSS.

By Pritam Sonone · Updated 17 Oct 2026 · Affiliate disclosure

Get the CSS →Get GeneratePress

Short answer: paste the CSS below into Appearance, Customize, Additional CSS. Your navigation gets a glow that cycles red, green and blue every 4 seconds. It switches off on phones and for visitors who prefer reduced motion.

Pritam Sonone
Verified byPritam Sonone
Read time4 min read

Summarize with AI:

Share

An animated RGB shadow is a CSS effect that cycles a glowing red, green and blue box-shadow around an element, here the GeneratePress navigation bar.

See it working

Screenshots from our test: GeneratePress on a clean WordPress install, at 0, 1.3 and 2.6 seconds.

GeneratePress navigation with the animated RGB shadow in red, green and blue
Tested 17 Oct 2026: red, green, then blue

The CSS

Copy it as is; it includes the phone and reduced-motion rules we added after testing.

/* Copyright © Digital Pritam (digitalpritam.in) */
@keyframes rgbShadowAnimation {
    0%   { box-shadow: 0 5px 15px 5px rgba(255, 0, 0, 0.25); }  /* Red */
    33%  { box-shadow: 0 5px 15px 5px rgba(0, 255, 0, 0.25); }  /* Green */
    66%  { box-shadow: 0 5px 15px 5px rgba(0, 0, 255, 0.25); }  /* Blue */
    100% { box-shadow: 0 5px 15px 5px rgba(255, 0, 0, 0.25); }  /* Red again */
}

.main-navigation:not(.slideout-navigation),
.sticky-enabled .main-navigation.is_stuck {
    animation: rgbShadowAnimation 4s infinite;
}

/* No animation on phones */
@media (max-width: 768px) {
    .main-navigation:not(.slideout-navigation),
    .sticky-enabled .main-navigation.is_stuck {
        animation: none;
        box-shadow: none;
    }
}

/* Respect visitors who turn off motion */
@media (prefers-reduced-motion: reduce) {
    .main-navigation:not(.slideout-navigation),
    .sticky-enabled .main-navigation.is_stuck {
        animation: none;
    }
}

How to add it

  1. Open the Customizer

    WordPress dashboard, Appearance, Customize.

  2. Paste into Additional CSS

    Or add it to your child theme’s style.css.

  3. Optional: move the menu below the header

    Layout, Primary Navigation, Navigation Location: Below Header, for a full-width glow.

  4. Publish and check

    Check desktop, phone and a sticky menu if you use one.

More on the theme: our GeneratePress review and theme speed test.

RGB header shadow: FAQ

Where do I add the CSS in GeneratePress?

Appearance, Customize, Additional CSS, or your child theme’s style.css. No plugin is needed.

Does it work with the free GeneratePress theme?

Yes. We tested it on the free GeneratePress theme on a clean WordPress install; the .main-navigation class is part of the free theme.

Why does the glow only wrap my menu?

On the default layout the menu floats to the right of the logo. Set Customize, Layout, Primary Navigation, Navigation Location to Below Header for a full-width glowing bar.

Will it slow my site down?

It is a few lines of CSS with no JavaScript. Animating box-shadow repaints the bar, so we switch it off on phones and for visitors who prefer reduced motion.

How do I change the speed or colours?

Change 4s to a longer or shorter time, and edit the three rgba() colours; the last number (0.25) controls how strong the glow is.

Methodology

How this page was built, so you can check it.

Detail
Date17 Oct 2026
EnvironmentWordPress Playground (latest WordPress, PHP 8.3), a clean install with GeneratePress 3.6.1 and nothing else
VersionsGeneratePress 3.6.1
ProcedureAdded the CSS under Appearance, Customize, Additional CSS, then captured screenshots of the menu at 0, 1.3 and 2.6 seconds and at phone width
MeasuredVisual result of the animation, and behaviour with reduced motion enabled
LimitsTested in one browser engine; very old browsers may not animate the shadow
Who checked this

About this page

Pritam Sonone

Pritam Sonone

Founder of Digital Pritam. WordPress developer and designer, WordCamp Kolhapur 2025 speaker. Builds WordPress sites for clients.

AboutWordCamp profileYouTube

How we checked

  • CSS tested on GeneratePress 3.6.1 on a clean WordPress install (PHP 8.3) on 17 Oct 2026
  • Screenshots taken at 0, 1.3 and 2.6 seconds of the animation
  • Phone and reduced-motion rules checked in the same test

Sources: GeneratePress · MDN: prefers-reduced-motion

Read our full testing process

Keep reading

Related guides

GeneratePress review 2026GeneratePress review 2026The lightest full theme we testedFastest WordPress themes 2026Fastest WordPress themes 20268 themes measured on a clean installKadence vs GeneratePressKadence vs GeneratePressTested on two live sitesBest WordPress Theme 2026Best WordPress Theme 2026Kadence, GeneratePress, Astra, BlocksyWP Rocket best settings 2026WP Rocket best settings 2026Every tab, tested on a live siteHow we test dealsHow we test dealsOur price checks, labels and corrections

Affiliate disclosure: some links on this page are affiliate links. If you buy through them, Digital Pritam may earn a commission at no extra cost to you. We only list deals we have checked on the brand’s own website, and commissions never change our picks. Prices can change at any time; always confirm the final price at checkout. Read our full affiliate disclosure.

Share