The hue-rotate() CSS function rotates the hue of an element and its contents. Its result is a <filter-function>.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
hue-rotate(angle)
Parameters
angle- The relative change in hue of the input sample, specified as an
<angle>. A value of0degleaves the input unchanged. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. The lacuna value for interpolation is0. There is no minimum or maximum value;hue-rotate(Ndeg)evaluates toNmodulo 360.
Examples
hue-rotate(-90deg) /* Same as 270deg rotation */ hue-rotate(0deg) /* No effect */ hue-rotate(90deg) /* 90deg rotation */ hue-rotate(.5turn) /* 180deg rotation */ hue-rotate(405deg) /* Same as 45deg rotation */
Specifications
| Specification | Status |
|---|---|
| Filter Effects Module Level 1 The definition of 'hue-rotate()' in that specification. |
Working Draft |