CSS text gradient generator

Generate your Text Gradient with our easy-to-use CSS Text Gradient Generator to make your website stand out with mesmerizing text gradients.

CSS Text Gradient

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.


Check out our blog post about gradient texts on your website

CSS code


  // CSS
  color: #c91c2b;
  background-image: -webkit-linear-gradient(0deg, #c91c2b 0%,#d5a017 50%,#ad6d38 100%);
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;


Click the code to copy or press CTRL + C

This is a PRO feature. ⭐

Remove ads, get your Connect profile, and unlock more features by upgrading to Colorffy PRO.

  • Connect profile
  • Remove ads
  • Create and save unlimited gradients and palettes
  • Gradient wallpaper generator
  • Access to all tools
  • Android and Flutter gradient code
  • Image palette PRO layouts