Creating a Gradient Text Effect in CSS

In this article, we will be learning how to add a gradient effect on text using the background-clip CSS property. You can see the final output below.

gradient1.png

Main CSS Properties We'll Use:

  • flexbox
  • background-clip and -webkit-background-clip

The HTML Part

First we have to create our HTML markup. We are not going to use anything complicated here. Our HTML code will be this,

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Gradient</title>
</head>

<body>
  <div class="container">
    <h1 class="gradient">Happy Halloween</h1>
  </div>
</body>

</html>

For good practice, we've wrapped our text into a container div. We've also added a class gradient in the text.

The CSS Part

Now for the CSS part, we have used a google font called "Metal Mania" for this just to make it look a bit more spooky. The first part of our CSS is to reset everything(just as a good practice) and importing and implementing the google font.

@import url("https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Metal Mania", cursive;
}

To center everything easily, we'll use flexbox here.

.container {
  background: #000;
  height: 100vh;
/*  Just to Center Everything  */
  display: flex;
  justify-content: center;
  align-items: center;
}

The Logic Behind

Now comes the main part. The logic behind gradient text is that we'll set a linear gradient background for the text first then we'll clip the background upto the size of the text. After clipping it, we'll just set the text color to transparent.

.gradient {
  font-size: 5rem;
/* Setting the Background  */
  background: linear-gradient(to right, #fcc133, #334efc);
  display: inline-block;
/* Clipping Background  */
  -webkit-background-clip: text;
  background-clip: text;
/* Setting the color to transparent  */  
color: transparent;
}

The inline-block will make the background to the size of the h1 text. The background-clip: text will allow us to clip the linear gradient background upto the text. The -webkit prefix version is used to make it fail safe. Now making the text color to transparent will only show the linear-gradient background. Other than that I think the code is pretty self-explanatory. So, combining all the parts, the final HTML and CSS will look like this,

The Final Version

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Gradient</title>
</head>

<body>
  <div class="container">
    <h1 class="gradient">Happy Halloween</h1>
  </div>
</body>

</html>
@import url("https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Metal Mania", cursive;
}
.container {
  background: #000;
  height: 100vh;
/*  Just to Center Everything  */
  display: flex;
  justify-content: center;
  align-items: center;
}
.gradient {
  font-size: 5rem;
/* Setting the Background  */
  background: linear-gradient(to right, #fcc133, #334efc);
  display: inline-block;
/* Clipping Background  */
  -webkit-background-clip: text;
  background-clip: text;
/* Setting the color to transparent  */  
color: transparent;
}

You can also check the codepen here. I've also added a simple animation in the effect using CSS hue-rotate filter. We'll discuss how to do animation in the next post.

No Comments Yet