This code utilizes CSS to transform ordinary text into a vibrant display of colors that smoothly transition from one hue to another. By applying this code to the desired text element, you can achieve an eye-catching visual experience that will undoubtedly grab your visitors’ attention.
The gradient spans across a spectrum of colors, including shades of blue, green, yellow, orange, and pink, creating a dynamic and engaging effect. With the included animation and background positioning, the rainbow gradient glides gracefully through the text, providing an alluring aesthetic appeal.
Implementing this code in your web projects is an excellent way to enhance the visual impact and add an element of delight to your design.
How to Create Animated Rainbow Gradient Text using CSS
First of all, load the following assets into the head tag of your HTML document.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text:wght@600&display=swap" rel="stylesheet">
Create the HTML structure as follows:
<p class="rainbow">CodePel <br> BORROW<BR>PH<i class="fab fa-phoenix-squadron"></i>ENIX</p>
Style using the following CSS styles:
.rainbow{
font-family: 'Big Shoulders Stencil Text', cursive;
font-size:128px;
color:transparent;
background: linear-gradient(270deg,#1e5799,#2ce0bf,#76dd2c,#dba62b,#ff1493,#1e5799);
animation:rainbow 64s linear infinite;
background-size: 60% 100%;
-webkit-background-clip:text;
text-align: center;
}
@keyframes rainbow{
0%{background-position-x:0}
to{background-position-x:10240px}
That’s all! hopefully, you have successfully created Animated Rainbow Gradient Text Css. If you have any questions or suggestions, feel free to comment below.
