Create a Gradient Text Effect using HTML and CSS

This article will show the approach to add a gradient effect on text using the background-clip CSS property. The final output of text using this effect is shown below. The CSS properties that would be used are flexbox, background-clip, and -webkit-background-clip and the background.

HTML Section: This section contains the HTML markup that will contain the text that has to be styled. The text has been wrapped in a container div as a good practice and to help it center on the page. The class gradient has also been added to the text. Nothing more complicated is needed in this section. 

CSS Section: The CSS section would consist of styling the text using the gradient effect. A google font named Metal Mania is used to give it the desired effect. We will first reset everything in the CSS as a good practice. The Google Font to be used would be imported and used next. We will also center everything using flexbox properties.

Creating the Gradient Effect: We will start making the main gradient effect. The logic is that a linear-gradient background is set for the text. Then the background is clipped to the size of the text. After clipping, the text color is set to transparent.

The inline-block property will make the background to the size of the heading text. The background-clip property with the text value will allow us to clip the linear gradient background up to the text. The -webkit prefix version is used to make it fail-safe. Making the text color transparent will only show the linear-gradient background.

Complete Code:

Output: