In questo articolo
La proprietà CSS filter spiegata
La proprietà CSS filter applica effetti grafici come sfocatura, luminosità, contrasto e spostamenti di colore a qualsiasi elemento HTML. Funziona su immagini, sfondi, testo e persino intere sezioni di pagina. I filtri sono processati dalla GPU del browser, rendendoli efficienti per effetti visivi in tempo reale.
CSS fornisce nove funzioni filtro integrate: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate e sepia. Queste possono essere concatenate in una singola dichiarazione filter per creare effetti visivi complessi. L'ordine dei filtri conta — ogni funzione processa l'output della precedente.
Come funziona ogni funzione filtro
Ogni funzione filtro prende un singolo valore e trasforma l'output visivo dell'elemento. Capire cosa fa ogni funzione aiuta a combinarle efficacemente.
- blur(px) — applica un effetto di sfocatura gaussiana, rendendo l'elemento sfocato. Valori più alti creano una sfocatura più forte. Utile per overlay di sfondo ed effetti vetro smerigliato
- brightness(%) e contrast(%) — brightness scala la luminosità complessiva (100% invariata, 200% doppia), mentre contrast regola la differenza tra aree chiare e scure
- grayscale(%), sepia(%) e hue-rotate(deg) — grayscale rimuove la saturazione del colore, sepia aggiunge un tono marrone caldo, e hue-rotate sposta tutti i colori attorno alla ruota dei colori
Prova gratuitamente — nessuna registrazione richiesta
Genera filtri CSS →Creare effetti stile Instagram
Impilando più funzioni filtro CSS, puoi ricreare effetti filtro fotografici popolari interamente nel codice. Questi effetti si applicano in tempo reale a qualsiasi elemento immagine.
- Look vintage — combina sepia(60%) con contrast(110%) e brightness(90%) per creare un effetto fotografico caldo e sbiadito che ricorda le vecchie fotocamere a pellicola
- Bianco e nero — usa grayscale(100%) con contrast(120%) per un effetto monocromatico ad alto contrasto. Aggiungi brightness(110%) per un bianco e nero più luminoso
- Atmosfera drammatica — impila contrast(150%) con saturate(130%) e brightness(80%) per un'atmosfera vivida e scurita dove i colori risaltano contro le ombre profonde
Domande frequenti
Si possono usare filtri SVG con la proprietà CSS filter?
Sì. La funzione url() in CSS filter permette di referenziare definizioni di filtri SVG personalizzati per effetti oltre le funzioni integrate. Questo consente effetti avanzati come mappe di spostamento e matrici di colore.
I filtri CSS influiscono sulle prestazioni?
I filtri CSS sono accelerati via GPU nei browser moderni, rendendoli efficienti per la maggior parte degli usi. Filtri singoli sulle immagini hanno un impatto minimo. Tuttavia, applicare sfocatura su aree grandi o animare più filtri può causare cali di frame su dispositivi meno potenti.
I filtri possono essere animati all'hover?
Sì. I filtri CSS funzionano perfettamente con transizioni e animazioni. Un pattern comune è applicare un filtro grayscale o blur di default e fare la transizione all'aspetto originale all'hover, creando effetti fluidi accelerati dalla GPU.