πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Create Gradient Texts in CSS

How to Create Gradient Texts in CSS

Ferenc Almasi β€’ 2020 August 17 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

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

Copied to clipboard! Playground
/* 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: */
gradient-text.css

Welcome to the 90's

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

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

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.