hue-rotate()

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);
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy

Contributors