hue-rotate()
Anonymous contributor
Anonymous contributor3071 total contributions
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
.
All contributors
- Anonymous contributorAnonymous contributor3071 total contributions
- robgmerrill124 total contributions
- jameskeezer23 total contributions
- christian.dinh2476 total contributions
- Anonymous contributor
- robgmerrill
- jameskeezer
- christian.dinh
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.