CSS hue-rotate()

Anonymous contributor's avatar
Anonymous contributor
Published Jul 13, 2021Updated Dec 7, 2023
Contribute to Docs

Accepts an angle value and rotates the hue of an element.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Career path

    Full-Stack Engineer

    A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours

Syntax

filter: hue-rotate(<angle>);

where a required <angle> can be one of the following: .25turn, -45deg, 1.57rad, 31.3grad

Note: Positive values increase the hue, negative values decrease the hue. A default value of 0 results in no change.

Example 1

Rotate the hue of the image by 45 degrees:

.banner-image {
  filter: hue-rotate(45deg);
}

The following images demonstrate the hue-rotate filter on a background image. The image on the left has no filter, while the image on the right has the filter hue-rotate set to 45deg.

Compares image without any filter to one with the hue-rotate filter of the value 45deg

All contributors

Contribute to Docs

Learn CSS on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Career path

    Full-Stack Engineer

    A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours