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