hue-rotate()

Published Jul 13, 2021Updated Sep 3, 2021
Contribute to Docs

Accepts an angle value and rotates the hue of an element.

Syntax

filter: hue-rotate(<angle>);

where a required <angle> can be one of the following: .25turn, -45deg, 1.57rad, 31.3grad

Note: Positive values increase the hue, negative values decrease the hue. A default value of 0 results in no change.

Example 1

Rotate the hue of the image by 45 degrees:

.banner-image {
filter: hue-rotate(45deg);
}

All contributors

Looking to contribute?

Learn CSS on Codecademy