Scroll to top
© 2022, Empty Code | All Rights Reserved

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;
}

LOVE TO CODE

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *