Generatore filtri CSS

Applica e visualizza effetti filtro CSS con cursori e preimpostazioni visive

Che cos'è e come funziona?

I filtri CSS applicano effetti visivi a immagini, sfondi ed elementi HTML interi usando il rendering accelerato dalla GPU. La proprietà filter accetta una o più funzioni: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() e drop-shadow().

Questo generatore fornisce cursori live per ogni funzione di filtro con anteprima in tempo reale. L'output è una singola dichiarazione CSS filter pronta da incollare.

Casi d'uso

• Filtro stile Instagram: combina saturate(1,3), contrast(1,1) e brightness(1,05) per un effetto foto vivido senza toccare il file immagine.
• Immagini in modalità scura: applica invert(1) hue-rotate(180deg) alle immagini su una pagina in modalità scura.
• Ricolorare icone SVG: trasforma un'icona nera in un colore del brand con filter: invert(1) sepia(1) saturate(5) hue-rotate(200deg).

Domande frequenti

Qual è la differenza tra filter e backdrop-filter?

filter si applica all'elemento e ai suoi contenuti. backdrop-filter si applica solo all'area dietro l'elemento — per effetti vetro smerigliato.

I filtri CSS influenzano le prestazioni?

I filtri sono accelerati dalla GPU nei browser moderni. Animare filtri su elementi grandi può causare scatti.

Posso usare filter su immagini di sfondo?

filter si applica all'intero elemento. Per filtrare solo l'immagine di sfondo, inseriscila in un pseudo-elemento ::before.

Cosa fa esattamente hue-rotate?

hue-rotate sposta tutti i colori dell'elemento intorno alla ruota dei colori. 0deg = nessun cambiamento; 180deg = colori complementari; 360deg = originale.

CSS

Generatore ombra box CSS · Generatore raggio bordo CSS · Generatore Flexbox · Generatore CSS Grid · Generatore ombra testo CSS · Generatore animazioni CSS