Scroll to top
© 2020, Empty Code | All Rights Reserved
Share

Gradient Text CSS


Rahul Kumar Sharma - October 13, 2019 - 0 comments

This following code will help the UI Developer who is working and needs a text gradient. The gradient on the text makes the website UI beautiful.


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 *