Gradient and Fade

The gradient and fade parameters draw a color gradient over the picture, or fade the picture itself out at its edges. Together they replace the CSS overlay you would otherwise stack on top of an image: a scrim behind headline text, a vignette, a color wash, or an image that dissolves into the page background.

They follow the CSS gradient rules, with the exceptions noted on each page.

8-digit colors are AARRGGBB — alpha first. CSS writes alpha last, so a value copied from a stylesheet will be wrong. cc000000 is 80% black; 000000cc is transparent black.

gradient paints colors over the picture. With gradient-mask=true it instead fades the picture itself out along the gradient. fade softens the picture’s edges to transparent.

Bad values are ignored silently, as CSS ignores an invalid declaration. An ignored parameter is left out of the X-Imgix-Params response header, which is the quickest way to spot a typo.

Order: the gradient is drawn, then the fade, then the border, padding, watermarks and text. Text therefore sits on top of a scrim, which is what makes the scrim useful.

The same parameters work on layers as mark-gradient*, mark-fade*, blend-gradient* and blend-fade*, including indexed spellings such as mark-fade[1]=20.

These parameters also work on the Video API, with some differences — see the notes on each page.

Notes

• provenance=c2pa lists gradient and fade as edits.
• A drop shadow under a faded picture shows black through the soft edge. This is tracked on ENG-2455.