The 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;
}

The hue-rotate function

Syntax

Example

Example

Example

See also