Photo by Ales Nesetril on Unsplash

Text Gradients

CSS!

It is quite different when it comes to applying gradient effects to text rather than to geometric shapes. For geometric shapes, it is simple.

block-gradient{
background-image: linear-gradient(to right, red , yellow);
height: 200px;
width: 200px;
}

In the case of applying gradients to the text, we have to use Web-kit. By that, the text remains editable and selectable web text. Else, we could clip the background to text then give a gradient to it. For instance, add code block as below to the text “Instagram”.

instagram-text {
color: transparent;
font-size: 24px;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(to right, #405DE6, #5851DB,   #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
}

Add this cool effect using methods, for instance, when you hover the mouse over the text.

instagram-text {
color: #ffffff;
font-size: 24px;
}
instagram-text:hover {
color: transparent;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(to right, #405DE6, #5851DB,   #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
}

Well, you can apply a gradient to text in any case as in like a text button.