Welcome to All Things GHL - Your Go To Resources for Code Snippets

Animated Gradiant Effect

/*
   1. Replace "your headline Selector ID" with the actual ID selector of your headline.
   2. Replace the gradient colors with your preferred colors in the linear-gradient property.
   3. Adjust the animation time (4s) to your desired duration.
*/

#yourCSSSelector h1 strong {
    background: linear-gradient(to right, #121FCF 0%, #CF1512 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: slide 4s linear infinite;
}

@keyframes slide {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

Instructions

  1. Create Headline element on Funnel

  2. Paste code in Custom CSS

  3. Click on Headline Element. Go to Advaced, and copy the CSS Selector

  4. Go back to Custom CSS, replace "yourCSSSelector" with what you just copied.

  5. Save

Last updated

Was this helpful?