Gradient
gradient
Burns a linear or radial color gradient into the video, defined by 2 to 16 color stops. Use it for a dark scrim behind captions, a brand-color wash, or a vignette.
gradient accepts a comma-separated list of 2–16 Imgix colors: RGB, ARGB, RRGGBB, AARRGGBB, or a CSS color name. An 8-digit color puts alpha first, so cc000000 is 80% black and 00000000 is fully transparent. 3- and 6-digit colors are opaque.
By default the stops are spaced evenly and run top to bottom. Shape and position the gradient with the companion parameters:
| Parameter | Controls |
|---|---|
gradient-type | Linear or radial |
gradient-angle | Direction of a linear gradient |
gradient-stops | Position of each stop |
gradient-alpha | Overall opacity |
gradient-cs and gradient-hue | How colors blend between stops |
gradient-mask | Fade the picture into bg instead of drawing color |
gradient-mode | Blend mode |
A list with an invalid color, or with fewer than 2 or more than 16 colors, draws nothing, and none of the companion parameters is read. The request still succeeds.
The gradient composites over the graded video and under picture-in-picture, watermarks, text, captions, and the progress bar, so text placed on a scrim isn’t dimmed by it. See Gradient Overlays and Fades for compose order, supported outputs, and fit=fill behavior.