# hue-rotate function

The `hue-rotate` function allows you to change a hue of a background image by rotating the hue on the color wheel. Property values ​​are specified in degrees, indicating the angle of the color wheel. The value `0` or `360` means that the image remains unchanged, and any number located within this range causes the background hue to change. The default value is `0deg`.

## Syntax

`selector { filter: hue-rotate(angle); }`

## Example

Let's set the hue value for our image to `150deg`:

`<div id="elem"></div>` `#elem { filter: hue-rotate(150deg); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Now let's set the image hue to `50deg`:

`<div id="elem"></div>` `#elem { filter: hue-rotate(50deg); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Let's put no value in the `hue-rotate` property:

`<div id="elem"></div>` `#elem { filter: hue-rotate(); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## See also

- the `blur` function
  that blurs a background
- the `brightness` function
  that sets a background brightness
- the `contrast` function
  that sets a background contrast
- the `drop-shadow` function
  that sets a background shadow
- the `invert` function
  that inverts background colors
- the `opacity` function
  that sets a background opacity
- the `sepia` function
  that converts a background to sepia
- the `background` property
  that is a shorthand property for a background
- the `background-image` property
  with that you can set a background image for a block
- the `filter` property
  that sets a background style

← →
↑
en ru