How to create text gradients using CSS easily.

#css #webdev #design #html

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.

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%);

And the result will be:

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;

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

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.