CSS hue-rotate() function

Definition and usage

CSS hue-rotate() Filter functions apply 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 represents 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

Αναφορά:CSS filter attribute

Αναφορά:CSS blur() function

Αναφορά:CSS brightness() function

Αναφορά:CSS contrast() function

Αναφορά:CSS drop-shadow() function

Αναφορά:CSS grayscale() function

Αναφορά:CSS invert() function

Αναφορά:Συνάρτηση CSS opacity()

Αναφορά:Συνάρτηση CSS saturate()

Αναφορά:Συνάρτηση CSS sepia()