DEV Community

Cover image for How to create text gradients using CSS easily.
Tejashwa Rajvardhan
Tejashwa Rajvardhan

Posted on

How to create text gradients using CSS easily.

A gradient is a continuation of colors with a starting and stopping point and a linear-gradient gradually moves in a straight line to another color.

Gradients are the latest trends these days and most of the websites are designed using gradients. With the background-clip property of CSS, it's very easy to implement gradients in text.

Syntax: How to create Text gradients

First, we have to set up a font using h1 or any tag of our choice and place it at the desired location. I have placed my font in the center using a flexbox.

Alt Text

The result can be achieved with the help of

  • linear-gradient()
  • background-clip
  • text-fill-color

1.Linear-gradient() property:

As explained above, this property creates a background linear gradient on the text block.
In CSS, linear-gradient is implemented using:



background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);


Enter fullscreen mode Exit fullscreen mode

And the result will be:

Alt Text

2.background-clip() property:

This CSS property sets whether an element's background extends underneath its border-box, padding-box, or content-box.



background-clip: text;


Enter fullscreen mode Exit fullscreen mode

And after applying this property, our text will look like:

Alt Text

Now you are wondering what happened to the linear-gradient we applied earlier, but after looking closely in the image you can see colors surrounding the text.

The background is painted within (clipped to) the foreground text.

Due to the text-color, we cannot see our linear gradient color, and then comes the use of our third and last property.

3.text-fill-color property:

Since we want to see the linear-gradient which is clipped to the foreground text, we have to make the color of the text transparent and we can achieve our result.



text-fill-color: transparent


Enter fullscreen mode Exit fullscreen mode

And the result will be something like this:

Alt Text

View full code in Codepen

Alt Text

Top comments (0)