How to Create Gradient Texts in CSS

The background-clip property, in combination with the text-fill-color property in CSS can be used for coloring texts with a gradient:

/* Create text gradients with the following: */

.gradient {
  background: -webkit-gradient(linear, 
    left top, left bottom, 
    from(#FCA101), to(#F03823)
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

/* Will produce the following: */
Copied to clipboard!

Welcome to the 90's

How to Create Gradient Texts in CSS
If you would like to see more Webtips, follow @flowforfrank


Remove ads
Remove ads

๐Ÿ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. โ˜•

Get access Support us
Remove ads
Remove ads
Remove ads
๐ŸŽ‰ Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.