How to create linear gradient text using HTML and CSS ?

Last Updated : 11 Jun, 2020

The linear-gradient is a kind of text-styling in which the text is filled with linear-gradient color codes. These kinds of effects are generally used in dark-themed websites or apps to make the text look attractive and bold. They are almost suitable for dark themes and do not go well with the lighter themes.

Approach: Please refer linear-gradient() method to sreate a gradient background and then use webkit properties to overlay that background with our text.

HTML Code: In the following section, the text used for demonstration is wrapped inside h1 tag.

<!-- Write HTML code here -->
<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width,  
        initial-scale=1.0" /> 
    <title>Gradient Text</title> 
  </head> 
<body> 
    <h1>GEEKSFORGEEKS</h1> 
  </body> 
</html> 

CSS Code: For CSS code, please follow the steps given below.

Step 1: Apply a basic background to the body tag and align the text to center of the page.
Step 2: Do some basic styling like font-size and family etc.
Step 3: Apply the linear gradient property with any colors of your choice.
Step 4: Now apply webkit properties, the first one will make the whole gradient-background transparent and the second property will fill the text with the gradient background.

Note: You can apply some shadow to the text to give it a darker or matte finishing kind of look.

<style> 
    body { 
        background: rgb(39, 39, 39); 
    } 
  
    h1 { 
        position: absolute; 
        top: 40%; 
        left: 40%; 
  
        font-size: 40px; 
        font-family: Arial,  
            Helvetica, sans-serif; 
        background: linear-gradient( 
            to right, #f32170, #ff6b08, 
             #cf23cf, #eedd44); 
        -webkit-text-fill-color: transparent; 
        -webkit-background-clip: text; 
    } 
</style> 

Complete Code: It is the combination of the above two sections of code.

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <title>Gradient Text</title> 
    <style> 
        body { 
            background: rgb(39, 39, 39); 
        } 
  
        h1 { 
            position: absolute; 
            top: 40%; 
            left: 40%; 
  
            font-size: 40px; 
            font-family: Arial, Helvetica, sans-serif; 
            background: linear-gradient(to right, #f32170, 
                    #ff6b08, #cf23cf, #eedd44); 
            -webkit-text-fill-color: transparent; 
            -webkit-background-clip: text; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GEEKSFORGEEKS</h1> 
</body> 
  
</html> 

Output:

My Personal Notes

Related Articles