Generatore di Filtri CSS
Genera effetti di filtro CSS visivamente. Regola sfocatura, luminosità, contrasto, scala di grigi, rotazione tonalità, inversione, opacità, saturazione e seppia con anteprima dal vivo. Gratuito.
Oppure trascina un'immagine sull'anteprima
Riferimento
Cos'è la proprietà CSS filter?
La proprietà CSS filter applica effetti grafici come sfocatura, spostamento colore e regolazione del contrasto a un elemento. I filtri vengono applicati prima che l'elemento venga composto, influenzando l'intero elemento inclusi bordi e ombre. Più funzioni di filtro possono essere concatenate in una singola dichiarazione.
Tutte le funzioni di filtro CSS
blur(px): Applica una sfocatura gaussiana. Valori più alti = più sfocatura.
brightness(%): Regola la luminosità. 100% = originale, 0% = completamente nero.
contrast(%): Regola il contrasto. 100% = originale, 0% = completamente grigio.
grayscale(%): Converte in scala di grigi. 0% = originale, 100% = completamente grigio.
hue-rotate(deg): Ruota i colori sulla ruota cromatica. 0deg = originale, 180deg = tonalità opposte.
invert(%): Inverte i colori. 0% = originale, 100% = completamente invertito.
opacity(%): Regola la trasparenza. 100% = completamente opaco, 0% = completamente trasparente.
saturate(%): Regola la saturazione dei colori. 100% = originale, sopra 100% = super-saturato.
sepia(%): Applica un tono seppia. 0% = originale, 100% = completamente seppia.
Considerazioni sulle prestazioni
I filtri CSS sono accelerati dalla GPU nei browser moderni. Tuttavia, applicare filtri a aree grandi o animare valori di filtro può causare ridisegni. Per migliori prestazioni: usa will-change: filter sugli elementi da animare e preferisci backdrop-filter quando vuoi sfocare solo ciò che è dietro un elemento.
Casi d'uso comuni
Effetti hover su immagini — scala di grigi a riposo, colore al passaggio del mouse.
Stato disabilitato — filter: grayscale(100%) opacity(50%) per elementi disabilitati.
Modalità scura — filter: invert(1) hue-rotate(180deg) come trucco rapido.
Sfocatura sfondo — backdrop-filter: blur(10px) per sovrapposizioni in vetro smerigliato.
Foto vintage — combinare seppia, contrasto e luminosità per look film analogico.
Privacy
Tutta la generazione di filtri viene eseguita al 100% nel tuo browser. Nessun dato viene inviato a nessun server. Le immagini caricate restano sul tuo dispositivo.