Gradient Color Text Effects Using HTML And CSS

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.

Submit a Comment

Your email address will not be published. Required fields are marked *

Footer Logo

Subscribe

Select Categories