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.
HTML
<!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.
CSS
<style>
@import url (
* {
box-sizing: border-box;
margin : 0 ;
padding : 0 ;
}
body {
font-family : "Metal Mania" ,
cursive ;
}
.container {
background : #000 ;
height : 100 vh;
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.
CSS
<style>
.gradient {
font-size : 5 rem;
background :
linear-gradient(to right ,
#fcc133 ,
#334efc );
display : inline- block ;
-webkit-background- clip : text;
background- clip : text;
color : transparent ;
}
</style>
|
Complete Code:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >CSS Text Gradient</ title >
< style >
@import url(
* {
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:
Last Updated :
14 Jul, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...