How to create linear gradient text using HTML and CSS ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.