How to create linear gradient text using HTML and CSS ?

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:
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)
REST API (Introduction)
How to set input type date in dd-mm-yyyy format using HTML ?
How to set the default value for an HTML <select> element ?
Design a Tribute Page using HTML & CSS