Come creare: aggiungi effetti alle immagini

Impara come aggiungere effetti visivi alle immagini.

Filtri immagine

Prova da solo

Filtri CSS

CSS filter Proprietà aggiungono effetti visivi agli elementi (come sfocatura e saturazione).

Attenzione:Internet Explorer, Edge 12 o Safari 5.1 e versioni precedenti non supportano filter Proprietà.

Esempio di scala di grigio

Cambia il colore di tutte le immagini in bianco e nero (100% grigio):

Tulip
Immagine originale
Tulip
Scala di grigio (100%)
img {
    -webkit-filter: grigio(100%); /* Safari 6.0 - 9.0 */
    filter: grigio(100%);
}

Prova da solo

Esempio di sfocatura

Applica un effetto sfocatura a tutte le immagini:

Tulip
Immagine originale
Tulip
Elaborazione sfocatura (5 pixel)
img {
  -webkit-filter: sfocatura(5px); /* Safari 6.0 - 9.0 */
  filter: sfocatura(5px);
}

Prova da solo

Pagine correlate

Manuale di riferimento:Proprietà filter CSS