CSS hue-rotate() function

Definition and usage

CSS's hue-rotate() The filter function applies color rotation to elements.

Instance

Example 1

Set different color rotations for images:

#img1 {
  filter: hue-rotate(200deg);
}
#img2 {
  filter: hue-rotate(90deg);
}
#img3 {
  filter: hue-rotate(-90deg);
}

Try it yourself

Example 2

to hue-rotate() with backdrop-filter Combined use of properties:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: hue-rotate(90deg);
  backdrop-filter: hue-rotate(90deg);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Try it yourself

CSS syntax

hue-rotate(angle)
Value Description
angle

Optional. Specify an angle to indicate the relative change of the input sample hue.

Positive values increase the hue value, and negative values decrease the hue value.

0deg indicates the original image (no effect).

The default value is 0.

Technical details

Version: CSS Filter Effects Module Level 1

Browser support

The numbers in the table represent the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Related pages

Reference:CSS filter property

Reference:CSS blur() function

Reference:CSS brightness() function

Reference:CSS contrast() function

Reference:CSS drop-shadow() function

Reference:CSS grayscale() function

Reference:CSS invert() function

Reference:CSS opacity() function

Reference:CSS saturate() function

Reference:CSS sepia() function