Generatore di filtri CSS (filter) per immagini
Scegli una foto o usa quella di esempio e gioca con i controlli. La foto originale non cambia: l’effetto è applicato dal browser.
Come si usaEffetti foto direttamente nel CSS
Disponibile in: 
Generatore di filtri CSS (filter) per immagini: a cosa serve
La proprietà filter del CSS applica effetti foto senza modificare il file. Scegli una foto e regola luminosità, contrasto, saturazione, scala di grigi, seppia, tonalità, inversione, sfocatura, opacità e ombra che segue il contorno (drop-shadow).
Parti da uno dei filtri predefiniti (bianco e nero, vintage, freddo, caldo, sbiadito, vivido, notturno), copia il CSS o scarica l’immagine con il filtro applicato. L’opzione hover genera il classico effetto della foto che torna normale al passaggio del mouse, con una transizione che rispetta chi ha chiesto meno movimento.
Come si usa
- Scegli la foto o usa quella di esempio.
- Regola i controlli o scegli un filtro predefinito.
- Copia il CSS o scarica l’immagine.
Quando usarlo
- Foto del team in bianco e nero.
- Galleria con effetto al passaggio del mouse.
- Loghi con ombra sul contorno.
Domande frequenti
Qual è il vantaggio di usare filter invece di modificare la foto?
La stessa foto serve per più effetti, e si può animare il cambiamento, come una foto in bianco e nero che diventa a colori al passaggio del mouse. Non serve salvare una versione per ogni effetto.
L’ordine dei filtri conta?
Sì. I filtri vengono applicati da sinistra a destra e ciascuno lavora sul risultato del precedente. Per questo una seppia seguita da un cambio di tonalità dà un risultato diverso dall’ordine inverso.
Che differenza c’è tra drop-shadow e box-shadow?
Il box-shadow disegna l’ombra del rettangolo dell’immagine. Il drop-shadow, che è un filtro, segue il contorno di ciò che è visibile, quindi funziona con PNG e SVG a sfondo trasparente, come loghi e ritagli.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.