Create a Gradient Text Effect using HTML and CSS
This article will show the approach to add a gradient effect on text using the background-clip CSS property. The final output of text using this effect is shown below. The CSS properties that would be used are flexbox, background-clip, and -webkit-background-clip and the background.
HTML Section: This section contains the HTML markup that will contain the text that has to be styled. The text has been wrapped in a container div as a good practice and to help it center on the page. The class gradient has also been added to the text. Nothing more complicated is needed in this section.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Text Gradient</title>
</head>
<body>
<div class="container">
<h1 class="gradient">
Happy Halloween
</h1>
</div>
</body>
</html>
CSS Section: The CSS section would consist of styling the text using the gradient effect. A google font named Metal Mania is used to give it the desired effect. We will first reset everything in the CSS as a good practice. The Google Font to be used would be imported and used next. We will also center everything using flexbox properties.
<style>
@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;
/* Center everything in the page */
display: flex;
justify-content: center;
align-items: center;
}
</style>
Creating the Gradient Effect: We will start making the main gradient effect. The logic is that a linear-gradient background is set for the text. Then the background is clipped to the size of the text. After clipping, the text color is set to transparent.
The inline-block property will make the background to the size of the heading text. The background-clip property with the text value will allow us to clip the linear gradient background up to the text. The -webkit prefix version is used to make it fail-safe. Making the text color transparent will only show the linear-gradient background.
<style>
.gradient {
font-size: 5rem;
/* Set the background of
the text */
background:
linear-gradient(to right,
#fcc133,
#334efc);
display: inline-block;
/* Clip the background upto
the text */
-webkit-background-clip: text;
background-clip: text;
/* Set the color of the text
to transparent */
color: transparent;
}
</style>
Complete Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Text Gradient</title>
<style>
@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;
/* Center everything in the page */
display: flex;
justify-content: center;
align-items: center;
}
.gradient {
font-size: 5rem;
/* Set the background of
the text */
background:
linear-gradient(to right,
#fcc133,
#334efc);
display: inline-block;
/* Clip the background upto
the text */
-webkit-background-clip: text;
background-clip: text;
/* Set the color of the text
to transparent */
color: transparent;
}
</style>
</head>
<body>
<div class="container">
<h1 class="gradient">
Happy Halloween
</h1>
</div>
</body>
</html>
Output:
