How to create linear gradient text using HTML and CSS ?

Last Updated : 21 Jun, 2024

The linear-gradient is used to create eye-catching text effects, particularly suitable for dark-themed websites or applications. This method involves filling text with linear-gradient color codes, making it look attractive and bold. Linear-gradient text effects are ideal for dark themes and provide a modern, stylish appearance. In this article, we will demonstrate how to apply linear-gradient to text using CSS, including necessary webkit properties to ensure compatibility across different browsers.

Approach to Create Linear-Gradient Text

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:

Applying linear-gradient to text is a stylish and modern technique that enhances the visual appeal of your website, especially suitable for dark-themed designs. By following the steps outlined in this article, you can easily create gradient-filled text using CSS and webkit properties. This method not only makes your text look attractive but also ensures compatibility across different browsers.