Loona Text Gradient Generator — Gradient Headline Text in CSS
Gradient headlines are the signature of modern landing pages. This tool shows the effect honestly — including the transparent-text trick it is built on — and hands you the four lines of CSS.
How to use the Text Gradient Generator
- Type your headline and pick the two colours and angle.
- Check the preview at a large size — gradients need bold, chunky type to shine.
- Copy the .gradient-text class and apply it to your heading.
How it works
The technique paints the gradient as the element’s background, clips the background to the text shape (background-clip: text), and makes the text itself transparent so the gradient shows through. The -webkit- prefix in the output keeps it working in every modern browser.
Worked example
A school site’s "Admissions Open" headline goes from flat black to a teal-gold gradient — same words, entirely new energy.
Frequently Asked Questions
Does gradient text hurt readability?
At headline sizes with strong colours, no. Avoid it for body text — gradients are a display treatment.
What if the gradient does not show?
Ensure the class is on the text element itself and no other color rule overrides the transparent color. The preview uses the identical CSS.
Can I use three colours?
Use the CSS Gradient Generator to build the multi-stop background value, then paste it into this pattern — the background line is interchangeable.
Is it accessible?
Keep headline contrast strong against the page background; gradients average out, so test the lighter colour too.
More Colour & CSS Generators
The visual Color Palette Generator and the basic Gradient Generator live in Loona Image Tools; this family is the CSS-developer-grade set (multi-stop gradients, exact code output).