Fill Gradient Hue
fill-gradient-hue
The fill-gradient-hue parameter sets which way around the hue wheel a gradient fill travels between two colors. It follows the CSS Color 4 hue interpolation rules and defaults to shorter.
| Value | Path taken |
|---|---|
shorter (default) | The shorter way around the wheel |
longer | The longer way around the wheel, sweeping through the opposite hues |
increasing | The path along which the hue angle increases |
decreasing | The path along which the hue angle decreases |
An unrecognized value falls back to shorter.
This parameter only has an effect in the cylindrical color spaces, so it is read when fill-gradient-cs is hsl, hsv, lch or oklch. In srgb, linear and oklab there is no hue wheel to travel around, and the value is ignored.
Setting both endpoints to the same color and choosing longer sweeps the full hue wheel, which is the shortest way to write a rainbow.