Gradient guide
About this css gradient text generator
Make gradient text with CSS
Gradient text uses a background gradient clipped to the letter shapes. The normal text colour is made transparent so the gradient shows through, while the text itself remains real selectable text.
Design text over a gradient background
The text is a separate layer above the base background. Give the text and background different gradients, add other transparent layers, and drag the text to the required position in the layer order.
Keep gradient headings readable
Choose colour stops that remain distinct from the background across the entire heading. For important or small text, prefer a solid accessible colour; gradient text is strongest for large display copy.
Frequently asked questions
How does CSS gradient text work?
The gradient is applied as a background and clipped to the text with background-clip: text while the text colour is transparent.
Is gradient text still selectable?
Yes. It remains HTML text rather than an image, so it can still be selected and read by assistive technology.
Can I put gradient text over another gradient?
Yes. Love Gradients treats text as its own layer above the background layers.