hue-rotate() CSS Function

Description

The CSS hue-rotate() function rotates the hue of an element and its contents. Hue is the color itself, such as red, green, or blue. Rotating the hue means shifting the color around the color wheel.

To use the hue-rotate() function, you need to specify an angle in degrees. The angle specifies how much to rotate the hue. A positive angle increases the hue value, while a negative angle decreases the hue value. A value of 0 degrees results in no change.

For example, the following CSS code will rotate the hue of the element with the class my-element by 90 degrees:

.my-element {
  filter: hue-rotate(90deg);
}

This will cause the element to appear blue instead of red.

You can also use the hue-rotate() function to create more subtle effects. For example, the following CSS code will rotate the hue of the element with the class my-element by 15 degrees:

.my-element {
  filter: hue-rotate(15deg);
}

This will cause the element to appear slightly more orange than red.

The hue-rotate() function can be used to create a variety of interesting and creative effects. It is a powerful tool for controlling the appearance of your web pages.

Here are some additional things to keep in mind about the hue-rotate() function:

• The hue-rotate() function can be used on any element, including images, text, and borders.
• The hue-rotate() function can be combined with other CSS filters to create even more complex effects.
• The hue-rotate() function is supported by all major browsers.

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

The following table will show you the current browser support for the CSS hue-rotate() function.

Desktop
12	53	35	40	9.1

Tablets / Mobile
53	35	41	9.3	6	4.4

Last updated by CSSPortal on: 7th October 2023