CSS Filter Generator

Informazioni su questo strumento

Il Generatore di Filtri CSS permette di regolare visivamente nove funzioni di filtro CSS — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate e sepia — e vedere l'effetto combinato in tempo reale.

I filtri CSS applicano effetti visivi simili al software di fotoritocco sugli elementi HTML. Sono accelerati da GPU e funzionano su immagini, sfondi, testo e qualsiasi elemento HTML.

Come usare

1. Trascina qualsiasi cursore per applicare quell'effetto filtro.
2. Combina più filtri — l'anteprima si aggiorna in tempo reale.
3. I filtri al valore predefinito sono automaticamente esclusi dall'output.
4. Clicca Reimposta tutto per tornare ai valori predefiniti.
5. Clicca Copia per copiare la proprietà CSS filter.

Casi d'uso

I designer usano grayscale e sepia per sezioni UI monocromatiche. Gli sviluppatori usano blur per sfondi a vetro smerigliato. brightness è comune negli effetti hover. Le implementazioni dark mode usano filtri invert.

Domande frequenti

• Qual è la differenza tra filter e backdrop-filter? — filter si applica all'elemento stesso e a tutti i suoi figli. backdrop-filter si applica solo all'area dietro l'elemento (utile per overlay a vetro smerigliato).
• Posso combinare più filtri? — Sì. Elencali separati da spazi nella proprietà filter. Questo strumento lo fa automaticamente.
• I filtri CSS influenzano le prestazioni? — Filtri semplici come grayscale e brightness sono economici. Il blur è più costoso, specialmente su aree grandi — usalo con parsimonia su mobile.