Skip to Content

CSS Text Gradient: Linear Animation

In this article, we'll create a linear animated text gradient with CSS that'll be sure to wow your website visitors. We'll choose two colors that will animate back and forth throughout your text and will work across all desktop and mobile browsers. Except for Internet Explorer. We don't do that stuff here.

This is what it will look like!

Orangeable

Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.
Advertising Disclosure: I am compensated for purchases made through affiliate links. Click here for details.

The CSS

First, let's take a look at some CSS code for text gradients:

div.text {
background: linear-gradient(-45deg, #6355a4, #6355a4, #e89a3e, #e89a3e);
background-size: 300%;
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
font-size: 5vw;
letter-spacing: -5px;
text-transform: uppercase;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animated_text 10s ease-in-out infinite;
-moz-animation: animated_text 10s ease-in-out infinite;
-webkit-animation: animated_text 10s ease-in-out infinite;
}

@keyframes animated_text {
0% { background-position: 0px 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0px 50%; }
}

And the HTML code to display text in a div element with class text:

<div class="text">Orangeable</div>

The Explanation

We first start by creating a linear gradient background within our div element and a background-size of 300% to stretch three times the width of the element. This alone will create a solid gradient filling the entire container, so there are a few other CSS rules needed to achieve our desired effect.

Setting the -webkit-background-clip value to text clips the background so only the text within the element is affected. And setting the -webkit-text-fill-color value to transparent removed the text fill so any assigned solid colors are no longer visible.

We then create a keyframe animation that will repeat itself every ten seconds and run infinitely, shifting the background position from left to right and back again through a full cycle.

Conclusion

In this article, we covered the basics of creating a linear animated text gradient with CSS that works across all browsers. Have fun playing around with different colors and gradient effects to make your website fun and exciting!

Posted by: Josh Rowe
Last Updated: January 30, 2023
Created: September 27, 2021

Comments

nice try

2y
nice try, you put a gif where should be a working code.
pfffff lame

Reply
 

Josh Rowe

2y
Hey there. I appreciate your honesty and keep working to provide a great experience for everyone who follows or happens upon my blog. This includes real working code examples in place of animated GIFs to provide a better learning experience for everyone. Thanks again and happy coding!

Reply

Add A Comment

Comment Etiquette: Wrap code in a <code> and </code>. Please keep comments on-topic, do not post spam, keep the conversation constructive, and be nice to each other.