Gradient Mode

The gradient-mode parameter sets how the gradient is blended with the picture beneath it. It accepts any blend-mode value, including the CSS names such as soft-light, and defaults to normal.

normal paints the gradient over the picture. The other modes interact with what is underneath: multiply darkens without flattening detail, screen lifts the shadows, and soft-light tints while preserving the picture’s own contrast — usually the most natural-looking way to push an image toward a brand color.

Edit in Sandbox

Edit in Sandbox

An unrecognized value falls back to normal. gradient-mode is not read when gradient-mask is on.

On video, only gradient-mode=normal is drawn. A video URL carrying any other mode renders the gradient as normal rather than failing.