Imgix APIsRendering APITextText Gradient

Text Gradient

txt-gradient

The txt-gradient parameter fills the letters of a text layer with a gradient instead of the solid txt-color. It matches the behavior the Video API already had, so a headline treatment can be written once and used for both.

Specifying Colors

txt-gradient takes 2 to 16 comma-separated colors. Each is a hexadecimal value — the 8-digit form is AARRGGBB, and a stop’s own alpha is drawn — or a CSS color keyword. The colors are always spaced evenly; there is no stops parameter.

A list with fewer than 2 colors, more than 16 colors, or a single unparseable color is ignored in its entirety, and txt-color is used instead. The rejected list still appears in the X-Imgix-Params response header, which is the quickest way to spot the typo.

Solid txt-color
sandbox-demo
txt-gradient=FF2200,0044FF
sandbox-demo
Four stops, evenly spaced
sandbox-demo
The same stops at txt-gradient-angle=90
sandbox-demo

Set the direction with txt-gradient-angle.

What the Gradient Covers

The gradient spans the whole text block, not each letter and not each line. Wrapped text set with txt-fit=wrap therefore shares one gradient across all of its lines, so the first line takes the start of the ramp and the last line takes the end.

When the gradient is valid, txt-color is not read at all and is left out of X-Imgix-Params.

The outline, the shadow and color emoji keep their own colors. txt-bg, txt-rotate and txt-alpha all behave as they do with a solid fill.

On wide-gamut images the colors still blend as sRGB, the same as fill=gradient.

The parameter works per layer, so a URL can set txt-gradient[1] and txt-gradient-angle[1] for a second text layer. The typesetting endpoint ignores it.