NEW

CSS text gradient generator

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

Gradient colors

Color 1

Color 2

Rotation

Start position (0%)

End position (100%)

CSS text gradient

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

@giangzadev

Check out our blog post about gradient texts on your website

CSS code

text-gradient.css


  // 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;

Featured tools

Gradient generator

Palette generator