• Creating an animated text gradient with CSS

    This effect is ideal for creating an eye catching text heading and is quite simple to acheive with just a bit of CSS, or it could be used as a mouseover effect with a bit of a tweak to the code.

    You can view an example here

    The CSS

    .gradient-text{
         font-size: 3rem;
         font-weight: 700;
         text-align:center;
         background: linear-gradient(to right, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
         background-size: 200% 200%;
         animation: rainbow 4s ease-in-out infinite;
         background-clip: text;
         -webkit-background-clip:text;
         color:rgba(0,0,0,0);
    }
    @keyframes rainbow { 
         0%{background-position:left}
         50%{background-position:right}
         100%{background-position:left}
    }

    The HTML

    <div class="container">
         <p class="gradient-text">Animated text gradient with CSS</p>
    </div>