Hello readers, Today in this blog you’ll learn how to create a Simple Colorful Gradient Text Effect using only HTML & CSS. Earlier I have shared a blog on how to create a Text Glitch Effect and now it’s time to create a rainbow gradient text effect. Generally, I used CSS linear-gradient function to mix two or more colors in the text.
The linear-gradient() CSS function creates an image consisting of a continuous transition between two or more colors on a straight line. In our program [Gradient Text Effect], there is a text labeled as “GRADIENT” on the webpage and inside the text, a gradient color flow continuously from the right side to the left side.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Gradient Text Effect].
Video Tutorial of Rainbow Gradient Text Effect
In the video, you have seen an Awesome Gradient Text Effect where linear-gradient colors flow continuously inside the text. I used two CSS properties to put the background color inside the text one is -webkit-background-clip and another one is -webkit-text-fill-color, and to animate or flow background color, I used CSS animation and @keyframes properties as you have seen in the video.
You can also put an image inside the text, to put the image inside the text you have to provide the image URL inside the background property i.e. background: url(“your image url here”). Simply, we call this effect clip an image to text.
If you like this Gradient Text Effect and want to get source codes of this program. You can easily get the codes of this program from below two boxes or you can also download code files – HTML & CSS from the download link which is given below. You can use this text effect in your project according to your choice.
You might like this:
Colorful Gradient Text Effect [Source Codes]
To create this program [Colorful Gradient Text Effect]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Gradient Text Effect | CodingLab</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div spellcheck="false" class="text" contenteditable="true">
Gradient</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
/* background: #000; */
}
.text{
font-size: 150px;
font-weight: 800;
outline: none;
text-transform: uppercase;
background: linear-gradient(135deg, #5335cf 0%, #de005e 25%, #f66e48 50%, #de005e 75%, #5335cf 100%);
background-size: 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate 10s linear infinite;
}
@keyframes animate {
to{
background-position: 400%;
}
}
That’s all, now you’ve successfully created a Colorful Gradient Text Effect using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.
