How does CSS gradient text work?
The gradient is set as the element's background, then background-clip: text clips that background to the shape of the letters, and a transparent text color lets it show through.
Design Tools
Gradient Text Generator
Create gradient-colored text for headings and logos, preview it live, and copy the CSS. Everything runs locally in your browser.
Gradient Text
FAQ
Gradient Text Generator FAQ
Does gradient text work in all browsers?
Yes, in all modern browsers. The generated CSS includes both the standard background-clip property and the -webkit- prefixed versions that Safari and older Chrome versions need.
Is gradient text accessible?
Screen readers read it like normal text. For readability, make sure every color in the gradient has enough contrast with the page background — the Color Contrast Checker can help — and use it for headings rather than long paragraphs. For gradient backgrounds instead of text, use the CSS Gradient Generator.