hue-rotate()

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jul 13, 2021Updated Dec 7, 2023
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);
}

The following images demonstrate the hue-rotate filter on a background image. The image on the left has no filter, while the image on the right has the filter hue-rotate set to 45deg.

Compares image without any filter to one with the hue-rotate filter of the value 45deg

All contributors

Looking to contribute?

Learn CSS on Codecademy