Gradient Text CSS

Rahul Kumar Sharma - October 13, 2019 - 0 comments

The following code will help the UI Developer to write CSS for text gradient. The gradient on the text makes the website UI beautiful and attractive. In the modern trend, we always wanted that the website which we are looking for should be attractive not only content-wise but UI-wise too. Below are the sample code for

1. Top to Bottom

.text-gradient-top-bottom{
  background: linear-gradient(to bottom, #F92665, #7E76FF) 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

LOVE TO CODE

2. Bottom to Top

.text-gradient-bottom-top{
  background: linear-gradient(to top, #F92665, #7E76FF); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

LOVE TO CODE

3. Left to Right

.text-gradient-left-right{
  background: linear-gradient(to right, #F92665, #7E76FF); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

LOVE TO CODE

4. Right to Left

.text-gradient-right-left{
  background: linear-gradient(to left, #F92665, #7E76FF); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}