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.
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.
Complete Code: It is the combination of the above two sections of code.
- Create a Gradient Text Effect using HTML and CSS
- How to Create Gradient Background Animation using HTML and CSS ?
- CSS | linear-gradient() Function
- CSS | repeating-linear-gradient() Function
- How CSS transition work with linear gradient background button?
- How to create long shadow of text without using text-shadow in HTML and CSS ?
- Text Animation with changing the color of the text using HTML & CSS
- How to Create a Cutout Text using HTML and CSS ?
- How to Create Liquid Filing Effect on Text using HTML and CSS ?
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- Create a 3D Text Effect using HTML and CSS
- How to create text-reveal effect using HTML and CSS ?
- How to Create Engraved Text Effect using HTML and CSS ?
- Create a Glowing text shadow using HTML and CSS
- How to Create Text Color Animation using HTML and CSS ?
- How to Create Text Reveal Effect for Buttons using HTML and CSS ?
- How to Create Ghost Text Animation on Hover using HTML and CSS?
- How to create multilayered text effect using HTML and CSS?
- How to draw a circle with gradient border using CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.