The CSS hue-rotate() Filter Function

This article demonstrates how to the use the CSS hue-rotate filter function on elements with CSS filter. Included is code and examples.

The hue-rotate function is a value of the CSS filter property. Hue-rotate applies a rotation of the hue of the target HTML element. This can also include an image.


filter: hue-rotate(degrees);


  • degrees (required)

The degree parameter of hue-rotate is a degree or angle. The value passed determines the rotation around the color circle an element’s hue will be changed. A value of 0deg will leave the element unchanged. A positive value will result in a positive increase of a hue while a negative value will result in a negative value. There is no minimum or maximum value for the hue-rotate degrees because Ndeg will evaluate to 360degs. The default value when omitted is 0 and interpolation is 0deg.

Note: In order to implement animations above 360deg the value must not be normalized.


The examples below uses positive and negative numbers and degrees for the parameter of the hue-rotate filter function.

hue-rotate(0)       /* No effect */

hue-rotate(0deg)    /* No effect */

hue-rotate(27deg)   /* A hue rotation of 27deg */
hue-rotate(-35)     /* A hue rotation of -35deg */
hue-rotate(0.6deg)  /* A hue rotation of 0.6deg */
hue-rotate(102deg)  /* A hue rotation of 102deg */
hue-rotate(180deg)  /* A hue rotation of 180deg */

hue-rotate(-47deg)  /* A hue rotation of -47deg */
hue-rotate(478deg)  /* A hue rotation of 478deg */


You can apply the hue-rotate filter to any element or image by using CSS selectors.

#element-id {
  filter: hue-rotate(60deg);

img {
  filter: hue-rotate(-24deg);

Try It

The CSS Hue-Rotate Filter Function
The CSS Hue-Rotate Filter Function


<div class="wrapper">
  <img src="" alt="" />
  <img src="" alt="" />
  <img src="" alt="" />


.wrapper img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 6px;
  margin: 0 20px;
  vertical-align: middle;

.wrapper img:nth-child(1) {
  filter: hue-rotate(0);

.wrapper img:nth-child(2) {
  filter: hue-rotate(90deg);

.wrapper img:nth-child(3) {
  filter: hue-rotate(180deg);

html {
  text-align: center;
  min-height: 100%;
  background: linear-gradient(white, #ddd);

.wrapper {
  width: 100%;
  background: transparent;
  text-align: center;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  height: 100%;

body {
  height: 100%;
  margin: 0;


W3C CSS Filter Effects Module Level 1

Other Filter Functions