CSS Text Gradient Generator

This tool will let you generate some text with a linear or radial gradient fill. You can add multiple layers to create interesting effects.

Random Text Gradient Generator

Gradient Settings For Shadow 1
x
y
°
Background Settings For Layer 1
This will only have an effect if the gradient size is less than 100%.
x
y
x
y
Preview
Edit Me
Examples

FAQ

How well supported is this?

Although background-clip: text is currently not officially supported, it's actually fairly well supported (over 95%) when using the -webkit prefix.

Unfortunately Internet Explorer does not support this property at all, so instead of setting the background to linear-gradient and the color to transparent, we set the background to -webkit-linear-gradient and the -webkit-text-fill-color to transparent. This allows IE to gracefully fall back to just rendering the text.

Why are the gradient angles different to the gradient generator?

Because the -webkit-linear-gradient property takes its angles a little bit differently to linear-gradient.

Why can't I use conic gradients?

The -webkit-conic-gradient property doesn't actually exist. We need the -webkit- prefix so Internet Explorer doesn't render a background for us. Internet Explorer doesn't actually support conic gradients anyway so we could use the unprefixed version here, but it would get rendered incorrectly on a handful of other browsers that do support conic-gradient but not -webkit-background-clip: text.