CSS Gradient Text Generator

The element gets a gradient background, then background-clip: text clips that background to the outline of the glyphs. The text fill color is set to transparent, so the clipped gradient shows through the letters instead of a solid color.

Clipping a background to text still relies on the -webkit- prefixed properties in several browsers, including Safari. The tool emits both the prefixed and standard versions so the effect works across the widest range of browsers.

Yes. Press + Add color to append stops, and they are spread evenly across the gradient in the order listed. You need at least two colors, and the remove button is disabled once you are down to two.

The text field accepts any valid CSS color, such as hex, rgb, hsl, or a named color. The native swatch picker only understands six-digit hex, so a three-digit hex is expanded and anything else falls back to black in the picker while your typed value is still used in the CSS.

For a linear gradient, the angle sets the direction the colors flow, in degrees from 0 to 360. 90deg runs left to right, 0deg runs bottom to top. The angle field is hidden for radial gradients because a radial circle has no single direction.

Yes. Keep a readable solid color on a parent element or as a fallback so the text stays legible in browsers that do not support background-clip: text, where transparent fill could otherwise render invisible text.

It works on any text element, including paragraphs, spans, and buttons. Large bold type shows a gradient best because there is more glyph area for the colors to spread across; very thin text can look almost solid.

No. The CSS is generated in your browser from your color and angle choices, and nothing is ever sent to a server.