The hue-rotate() function applies a color rotation to the elements on which it is applied.

hue-rotate(angle)

angle

The relative change in hue of the input sample, specified as an <angle>. 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 initial value for interpolation is 0. There is no minimum or maximum value. The effect of values above 360deg are, given hue-rotate(Ndeg), evaluates to N modulo 360.

The <angle> CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. The following are equivalent:

hue-rotate(-180deg)
hue-rotate(540deg)
hue-rotate(200grad)
hue-rotate(3.14159rad)
hue-rotate(0.5turn)

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

This example applies a hue-rotate() filter via the backdrop-filter CSS property to the paragraph, color shifting to the area behind the <p>.

.container {
  background: url(image.jpg) no-repeat left / contain #011296;
}
p {
  backdrop-filter: hue-rotate(240deg);
  text-shadow: 2px 2px #011296;
}

This example applies a hue-rotate() filter via the filter CSS property adding the color shift to to the entire element, including content, border, and background image.

p {
  filter: hue-rotate(-60deg);
  text-shadow: 2px 2px blue;
  background-color: magenta;
  color: goldenrod;
  border: 1em solid rebeccapurple;
  box-shadow: inset -5px -5px red, 5px 5px yellow;
}

The SVG <filter> element is used to define custom filter effects that can then be referenced by id. The <filter>'s <feColorMatrix> primitive hueRotate type provides the same effect. Given the following:

<filter id="filterID">
  <feColorMatrix type="hueRotate" values="90" />
</filter>

These values produce the same results:

filter: hue-rotate(90deg); /* 90deg rotation */
filter: url(#filterID); /* with embedded SVG */
filter: url(folder/fileName.svg#filterID); /* external svg filter definition */

This example shows three images: the image with a hue-rotate() filter function applied, the image with an equivalent url() filter applied, and the original images for comparison:

• CSS filter effects module
• The other <filter-function> functions available to be used in values of the filter and backdrop-filter properties include:
  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • invert()
  • opacity()
  • saturate()
  • sepia()