In this article, we are going to learn how to set gradient effects in text.
First, you need to create the following HTML structure.
<!DOCTYPE html>
<html>
<head>
<title>Gradient Text Effects</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
</head>
<body>
<div class="heading-text">
<img src="img/code_hub_img.jpg" alt="codehub" width="100" height="100">
<h1 class="gradient-text"><sup>The</sup><span class="code-text">Code</span><sub>Hubs<sub></h1>
</div>
</body>
</html>
And then you need to apply the below CSS.
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.heading-text{
text-align: center;
}
.heading-text img{
width: 100%;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
width: auto;
height:auto;
display:block;
}
/* gradient-css */
.gradient-text {
position: absolute;
top: 25%;
left: 50%;
-webkit-transform: translateX(-50%); /* Safari & Chrome */
-moz-transform: translateX(-50%); /* Firefox */
-ms-transform: translateX(-50%); /* Internet Explorer */
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-animation:gradient_text_key 2s infinite linear; /* Safari & Chrome */
-moz-animation:gradient_text_key 2s infinite linear; /* Firefox */
-ms-animation:gradient_text_key 2s infinite linear; /* Internet Explorer */
-o-animation:gradient_text_key 2s infinite linear; /* Opera */
animation: gradient_text_key 2s infinite linear;
font-size: 100px;
font-family: 'Staatliches', cursive;
background-color: #fff;
background-image: -webkit-linear-gradient(145deg, #da27d1, #4857ed, #da27d1, #4857ed);
background-image: -moz-linear-gradient(145deg, #da27d1, #4857ed, #da27d1, #4857ed);
background-image: -ms-linear-gradient(145deg, #da27d1, #4857ed, #da27d1, #4857ed);
background-image: -o-linear-gradient(145deg, #da27d1, #4857ed, #da27d1, #4857ed);
background-image: linear-gradient(145deg, #da27d1, #4857ed, #da27d1, #4857ed);
background-size: 350% 100%;
border-radius: 1rem;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
span.code-text {
font-size: 130px;
padding: 20px;
}
And then you need to add the following animation to your CSS file.
/* gradient-keyframes */
@keyframes gradient_text_key {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
Now It’s Ready.
You Can View the Following Result.
If you having any issues or questions please add them to the comment.
Thank you.
