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.
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular