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:
Article Tags :
Recommended Articles