CSS Gradient Text Generator
Fill text with a color gradient using pure CSS. Choose the colors and a linear angle or radial style, and the tool writes the background-clip rule that paints the gradient onto your text.
How to generate CSS gradient text
- Add two or more colors for the gradient.
- Pick a linear angle or switch to a radial gradient.
- Copy the CSS block and apply it to your heading or text element.
Examples
Two-color linear
colors #ff0000 and #0000ff, 90deg linear
background: linear-gradient(90deg, #ff0000, #0000ff);
Radial gradient
colors #ff0000 and #0000ff, radial
background: radial-gradient(circle, #ff0000, #0000ff);
Frequently asked questions
How does gradient text work?
The element gets a gradient background, then background-clip: text clips that background to the shape of the glyphs, and the text fill color is set to transparent so the gradient shows through.
Why are there -webkit- prefixes?
Background clipping to text still needs the -webkit- prefix in several browsers, so the tool outputs both the prefixed and standard properties for the widest support.
Can I use more than two colors?
Yes. Add as many colors as you like and they are spread evenly across the gradient in the order you list them.
Should I set a fallback color?
For accessibility, keep a solid color on a parent or as a fallback for browsers that do not support background-clip, so the text stays readable if the gradient fails.
Is anything uploaded?
No. The gradient CSS is generated in your browser and your color choices are never sent to a server.
Related tools
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
Color Palette Generator
Generate complementary, analogous, triadic, tetradic and monochromatic color palettes from one base color. Pick a hex, copy each shade as hex, RGB or HSL.
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.