Cosa sono i filtri CSS?

I filtri CSS consentono di applicare effetti grafici come la sfocatura o il cambio di colore a un elemento. Sono comunemente usati per immagini, sfondi e bordi.

I filtri possono essere utilizzati per creare effetti visivi, migliorare le immagini o creare elementi di design unici senza la necessità di strumenti di modifica delle immagini esterni.

Proprietà del filtro CSS supportate

• blur()- Applica una sfocatura gaussiana all'elemento.
• brightness()- Regola la luminosità dell'elemento.
• contrast()- Regola il contrasto dell'elemento.
• grayscale()- Converte l'elemento in scala di grigi.
• hue-rotate()- Applica una rotazione di tonalità all'elemento.
• invert()- Inverte i colori dell'elemento.
• opacity()- Regola l'opacità dell'elemento.
• saturate()- Satura o desatura l'elemento.
• sepia()- Converte l'elemento in seppia.

Come applicare i filtri

Utilizzando il codice CSS generato da questo strumento, è possibile applicare filtri a qualsiasi elemento HTML. Ecco come:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

Compatibilità con i browser

I filtri CSS sono ampiamente supportati nei browser moderni, tra cui Chrome, Firefox, Safari, Edge e Opera. Tuttavia, i browser meno recenti come Internet Explorer non li supportano.