Imgix APIsRendering APIFillFill Gradient Stops

Fill Gradient Stops

fill-gradient-stops

The fill-gradient-stops parameter sets where each color of a fill-gradient-linear or fill-gradient-radial list sits along the gradient. Without it, the colors are spaced evenly.

Pass one position per color, from 0 (the start of the gradient) to 100 (its end), separated by commas. Positions must never decrease. Two neighbors at the same position produce a hard edge instead of a blend, which is how you build a flag or a banded background.

A list whose length does not match the color count, whose positions decrease, or whose values fall outside 0–100 is ignored, and the colors are spaced evenly instead.

Three colors, evenly spaced
sandbox-demo
fill-gradient-stops=0,15,100 pushes the yellow toward the start
sandbox-demo

Repeating a position gives a hard split.

fill-gradient-stops=0,50,50,100 splits the fill in two
sandbox-demo