CSS Gradient Text Generator

Produces CSS for text filled with a linear or radial gradient using the background-clip: text technique. Color stops, angle, and direction are configurable; output includes the full property block plus the -webkit- prefix needed by Safari.

The technique paints a gradient on the element background, then masks it to the shape of the glyphs by setting the text color transparent.

The rendered output relies on three CSS properties working together: background-image (the gradient itself), background-clip: text (which clips the painted background to the glyph shapes), and color: transparent or -webkit-text-fill-color: transparent (which prevents the foreground glyph fill from covering the clipped background). Removing any one of the three breaks the effect. The approach is supported in all current evergreen browsers; older Safari versions still require the -webkit- prefix on background-clip, which the generator emits automatically.

A worked example: setting stops to #FF6B6B at 0% and #4ECDC4 at 100% with a 90deg angle yields a horizontal coral-to-teal gradient across each character. The output CSS is roughly background: linear-gradient(90deg, #FF6B6B, #4ECDC4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;. Applied to an h1 with a large font weight, the gradient becomes legible across each stroke; on thin display fonts at small sizes, the gradient compresses into a few pixels per glyph and reads as a flat color, which is why the technique is best reserved for headlines and short labels.

Limitations are well-known. Email clients almost universally strip background-clip or render fallback solid color, so gradient text in newsletters should be exported as an image. Screen readers read the underlying text fine because the DOM content is unchanged, but high-contrast accessibility modes may override the gradient with a single system color. The technique also breaks selection highlight rendering in some browsers, where the highlight color sits on top of the gradient instead of underneath. Print rendering is hit or miss; some print engines flatten background-clip to solid color, others preserve it.

The generator includes a fallback color property so browsers that don't support background-clip: text show readable text instead of invisible glyphs. WCAG contrast checks should be run against the darkest stop in the gradient against the page background, not the average; the lightest part of the gradient is the limiting factor for legibility.