Open In App

How to create linear gradient text using HTML and CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 lighter themes.

Approach

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

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

  • HTML Code: For the HTML Code, create the basic HTML Boilerplate & add the heading with <h1> tag with “GeeksforGeeks” text.

html




<!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:
    • Apply a basic background to the body tag and align the text to center of the page.
    • Do some basic styling like font-size and family etc.
    • Apply the linear gradient property with any colors of your choice.
    • 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.

CSS




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


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

HTML




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



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads