Toolzi LogoToolzi

CSS Gradient Text Generator

Generate CSS gradient text effects instantly. Customize colors and direction, preview live, and copy the CSS code.

0%
100%

Preview

Hello World
48px

CSS Code

.gradient-text {
  background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

What is CSS Gradient Text?

CSS gradient text applies a color gradient to text by using a gradient as the element's background, then clipping it to the text shape with background-clip: text. This technique creates eye-catching typography without images.

How to Apply Gradient to Text in CSS

Set a gradient background on your element, then apply -webkit-background-clip: text and -webkit-text-fill-color: transparent. The background-clip: text property clips the background to the text, revealing the gradient through the letterforms.

Browser Compatibility

-webkit-background-clip: text is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The standard background-clip: text property is also well supported. Always include both prefixed and unprefixed versions for full coverage.

Frequently Asked Questions

How do I make gradient text in CSS?
Apply a gradient as the background, then use -webkit-background-clip: text and -webkit-text-fill-color: transparent to show the gradient through the text.
Does CSS gradient text work in all browsers?
Yes. -webkit-background-clip: text is supported in all modern browsers including Chrome, Firefox, Safari, and Edge.
Can I use radial or conic gradients for text?
Yes. Any CSS gradient type (linear, radial, conic) can be used as the background for gradient text.
Why do I need -webkit-text-fill-color: transparent?
-webkit-text-fill-color overrides the text color in WebKit browsers. Setting it to transparent makes the gradient background visible through the text.
Can I animate CSS gradient text?
Yes. You can animate background-position or use CSS @keyframes with background-size to create animated gradient text effects.
What is the difference between color and -webkit-text-fill-color?
-webkit-text-fill-color takes precedence over color in browsers that support it, allowing the gradient background to show through.

Related Tools

CSS Gradient Generator →