hue-rotate()

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

Syntax

filter: hue-rotate(<angle>);

to clipboard
Copy to clipboard

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

to clipboard
Copy to clipboard

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.