Create a Gradient Text Effect using HTML and CSS

Last Updated : 14 Jul, 2020

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( 
"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.

CSS

<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:

HTML

<!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> 