Gradient Mode
gradient-mode
Sets how the gradient blends into the picture, using the CSS blend modes, as on Imgix images. It is ignored with gradient-mask.
| Value | Description |
|---|---|
normal (default) | Draws the gradient over the picture at its own alpha. |
multiply | Multiplies the colors, darkening the picture. |
screen | Inverts, multiplies, and inverts again, lightening the picture. |
overlay | Multiplies dark areas and screens light areas, increasing contrast. |
darken | Keeps the darker of the two colors. |
lighten | Keeps the lighter of the two colors. |
color-dodge | Brightens the picture to reflect the gradient. Alias: dodge. |
color-burn | Darkens the picture to reflect the gradient. Alias: burn. |
hard-light | Multiplies or screens depending on the gradient color. Alias: hardlight. |
soft-light | A softer version of hard-light. Alias: softlight. |
difference | Subtracts the darker color from the lighter one. |
exclusion | Like difference, with lower contrast. |
hue | Takes the hue of the gradient and the saturation and luminosity of the picture. |
saturation | Takes the saturation of the gradient. |
color | Takes the hue and saturation of the gradient and the luminosity of the picture. |
luminosity | Takes the luminosity of the gradient. |
Values are case-insensitive, and a prefix picks the first match in the order Imgix images use, so d is dodge. An unknown name draws normal.
When a gradient and a fade are used together, the gradient blends first and the fade draws over it.
On HDR video, the blend treats reference white (203 nits) as white, so under an opaque stop, highlights above it clip to it. With a mode other than normal, Dolby Vision profile 5 and 7 sources render in SDR.