Pick two or more colors and an angle, preview gradient-filled text live, and copy ready-to-use CSS.
Gradient Text
Type or edit your headline directly in the preview, add two or more color stops, and adjust the angle or direction until the blend looks right. This tool generates a background gradient combined with background-clip: text and a transparent text color, plus the -webkit- prefix Safari still needs. Copy the CSS and apply it to any heading, span or button label.
Type directly on the sample heading to see exactly how your own copy will look.
Add up to six color stops for rich, vibrant multi-color text effects.
Includes the -webkit-background-clip prefix so Safari renders it correctly too.
A background gradient is applied to the text element, clipped to the shape of the text glyphs with background-clip: text, and the text color is set to transparent so the gradient shows through.
Modern browsers support background-clip: text, but Safari and some older browsers require the -webkit-background-clip prefix, which this generator includes automatically.
Yes. Add extra color stops to build a richer multi-color gradient across your text.
Because color is set to transparent, always include a fallback color for browsers that do not support background-clip: text so the text stays readable.
Yes. The same CSS works on any inline or block text element, including headings, links and button labels.