Gradient Text
Generated CSS
CSS gradient text uses the background-clip: text technique — you apply a gradient as the element's background, then clip it to the text shape. This makes the gradient appear only where the text characters are, with the background showing through everywhere else.
Use the generator above to pick colors, set angle and gradient type — then copy the CSS directly into your project.
.gradient-text {
background: linear-gradient(90deg, #7c6fff, #ff6fb0);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; /* fallback */
}
| Property | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| background-clip: text | Yes | Yes | Yes (-webkit) | Yes |
| -webkit-text-fill-color | Yes | Yes | Yes | Yes |
Safari requires the -webkit- prefix. While background-clip: text is now in the standard, keeping both ensures maximum browser compatibility.
Yes — apply the same CSS to any inline or block element. For <button> elements, set background on the button itself and -webkit-background-clip: text. Make sure no other background overrides it.
The element background shows through the transparent text. If your parent element has the same gradient background, the text appears to disappear. Use a contrasting parent background or add a text-shadow fallback.
Related tools: CSS Gradient Generator · Neon Text Generator · Text Shadow Generator