Função hue-rotate

A função hue-rotate permite alterar a cromaticidade da imagem de fundo por meio da rotação do matiz no círculo cromático. Os valores da propriedade são especificados em graus, denotando o ângulo do círculo cromático. O valor 0 ou 360 denota que a imagem permanece inalterada, e qualquer número localizado dentro desse intervalo leva a uma alteração no matiz do fundo. Por padrão, o valor é 0deg.

Sintaxe

seletor {
	filter: hue-rotate(ângulo);
}

Exemplo

Vamos definir para nossa imagem uma cromaticidade igual a 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;
}

Exemplo

Agora vamos definir a cromaticidade da imagem igual a 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;
}

Exemplo

Vamos não definir um valor na propriedade hue-rotate:

<div id="elem"></div>

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

Veja também

função blur,
que desfoca o fundo
função brightness,
que define o brilho do fundo
função contrast,
que define o contraste do fundo
função drop-shadow,
que define a sombra do fundo
função invert,
que inverte as cores de fundo
função opacity,
que define a transparência do fundo
função sepia,
que converte o fundo para sépia
propriedade background,
que representa a propriedade abreviada para o fundo
propriedade background-image,
com a qual se pode definir uma imagem de fundo para um bloco
propriedade filter,
que define o estilo para o fundo