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.

Colors


Featured presets

View more gradients

Superpowered

Smarter together

Let your eyes feast on the stunning beauty of gradient colors.

10x your productivity with AI.

Values

Type


Angle direction


Position

Tip: Press SPACE to generate random colors

Click a color block to copy to your clipboard. text gradient on your website

Code

/** Text Gradient Example */ 
.text-gradient {
 color: #c11ceb; 
 background-image: linear-gradient(45deg, #c11ceb 0%, #6f19b5 50%, #25007a 100%); 
 background-clip: text; 
 -webkit-background-clip: text; 
 -webkit-text-fill-color: transparent; 
}

Submit feedback

We'd love to hear from you, tell us what you think about Colorffy, and what we can improve.

What's your suggestion? 💡

Optional

Create your free account

Sign up to save and like your color palettes, gradients, and more.

Sign up with

or

Already have an account? Log in

By signing up, you agree to our Terms of Service and Privacy Policy

Upgrade to Pro and unlock more features.

Trusted and used by designers and developers from companies around the world.

.css.csv.json.jpg.png.svgapp tokenshdr colors

Create. Export. Build faster.

Get access to more export file formats, app tokens, remove ads, unlimited collections, and more.


  • Unlimited collections New
  • Export Dark Theme to .css, and .csv New
  • App colors tokens New
  • Early access to new tools & features
  • Export to multiple formats (.json, .css, .csv)
  • Export colors as images (.jpeg, .png, .svg)
  • Remove ads
PWA prompt