Sintassi

Funzioni principali supportate:

• blur(px): applica una sfocatura all'elemento (es. blur(5px)).
• brightness(%): modifica la luminosità (es. brightness(150%)).
• contrast(%): aumenta o riduce il contrasto.
• grayscale(%): converte l’immagine in bianco e nero.
• sepia(%): applica un effetto seppia.
• hue-rotate(deg): ruota i toni del colore (es. hue-rotate(90deg)).
• invert(%): inverte i colori.
• saturate(%): regola la saturazione dei colori.
• drop-shadow(x y blur color): simile a box-shadow ma più avanzato (es. drop-shadow(2px 4px 6px black)).

Nota: È possibile combinare più effetti scrivendoli uno dopo l’altro, separati da uno spazio.

Esempio proprietà: filter

Codice Esempio: filter

CODE: CSS

1. .filtered-image {

2.   width: 300px;

3.   filter: grayscale(100%) drop-shadow(8px 8px 10px gray);

4.   transition: filter 0.3s ease;

5. }

7. .filtered-image:hover {

8.   filter: none;

9. }

Contenuto Esempio: filter

Esempio di utilizzo di filter su un'immagine

In questo esempio, l'immagine viene visualizzata in bianco e nero con un'ombra fluttuante:

CSS e HTML per l'applicazione del filtro:

  
  <style>
    .filtered-image {
      width: 300px;
      filter: grayscale(100%) drop-shadow(8px 8px 10px gray);
      transition: filter 0.3s ease;
    }

    .filtered-image:hover {
      filter: none;
    }
  </style>

  <img class="filtered-image" src="https://example.com/blu300x200.png" alt="Esempio con filtro" />
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser