Funzione CSS hue-rotate()

Definizione e uso

CSS hue-rotate() Le funzioni di filtro applicano una rotazione di colore agli elementi.

Esempio

Esempio 1

Imposta diverse rotazioni di colore per le immagini:

#img1 {
  filter: hue-rotate(200deg);
}
#img2 {
  filter: hue-rotate(90deg);
}
#img3 {
  filter: hue-rotate(-90deg);
}

Prova tu stesso

Esempio 2

per hue-rotate() con backdrop-filter Combina proprietà:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: hue-rotate(90deg);
  backdrop-filter: hue-rotate(90deg);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Prova tu stesso

Sintassi CSS

hue-rotate(angle)
Valore Descrizione
angle

Opzionale. Specifica un angolo che rappresenta la variazione relativa del tono dell'input.

Valori positivi aumentano il valore del tono, valori negativi lo riducono.

0deg rappresenta l'immagine originale (nessun effetto).

Il valore predefinito è 0.

Dettagli tecnici

Versione: Modulo CSS Filter Effects Livello 1

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la funzione.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Pagina correlata

Riferimento:Proprietà filter CSS

Riferimento:Funzione CSS blur()

Riferimento:Funzione CSS brightness()

Riferimento:Funzione CSS contrast()

Riferimento:Funzione CSS drop-shadow()

Riferimento:Funzione CSS grayscale()

Riferimento:Funzione CSS invert()

Riferimento:Funzione opacity() CSS

Riferimento:Funzione saturate() CSS

Riferimento:Funzione sepia() CSS