CSS text gradient generator

Generate your CSS text gradients, and use this custom text gradient color on your website's CSS texts.

Gradient colors

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: #f52c8a;
  background-image: -webkit-linear-gradient(0deg, #f52c8a 0%, #dd00ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;


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