Anjan Dutta

Create gradient colored text in CSS

To create a gradient colored text, we have to use three css properties.

background Sets the background attributes.
background-clip Lets you control how far a background image or color extends.
text-fill-color The text-fill-color and the color properties are the same, but the text-fill-color takes precedence over the color if the two have different values.

Example

Gradient text

Working code below.

The HTML

<html>
  <head>
    <title></title>
  </head>
  <body>
    <span>Lorem Ipsum</span>
  </body>
</html>

The CSS

span {
  background: linear-gradient(135deg, blue,red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 120px;
}