hue-rotate() CSS Function

Description

The hue-rotate() CSS function changes the color of the image by rotating the hue on the color wheel.

Syntax

hue-rotate() = hue-rotate( [ <angle> | <zero> ]? )

Values

  • angleThe relative change in hue of the input sample, specified as an . A value of 0deg leaves the input unchanged. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. The lacuna value for interpolation is 0. There is no minimum or maximum value; hue-rotate(Ndeg) evaluates to N modulo 360.

Example

<img class="hue-rotate" src="images/nature.jpg" alt="Hue Rotate Example">
.hue-rotate {
filter: hue-rotate(90deg);
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
X125335409.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
535335419.36.0

Last updated by CSSPortal on: 1st December 2019