Generatore di filtri CSS

Come usare

1. Regola i cursori di filtro: usa i cursori per controllare sfocatura, luminosità, contrasto, saturazione, rotazione tonalità, opacità, scala di grigi, seppia e inversione.
2. Visualizza l'anteprima in tempo reale: l'immagine o l'elemento di esempio si aggiorna all'istante quando sposti un cursore.
3. Copia il CSS: il valore completo della proprietà filter (per es. filter: brightness(1.2) contrast(1.5) saturate(0.8)) è pronto da incollare nel tuo foglio di stile.

Perché usare il generatore CSS di filtri?

I filtri CSS permettono di applicare effetti di elaborazione delle immagini, sfocatura, contrasto, luminosità, spostamenti di colori, direttamente nel browser senza Photoshop né software di editing di immagini. Funzionano sulle immagini, sui video e su qualsiasi elemento HTML. Costruire la catena della proprietà filter a mano richiede di conoscere i nomi esatti delle funzioni e gli intervalli di valori validi. Questo generatore propone cursori intuitivi con feedback visivo per ottenere esattamente il rendering desiderato.

Funzionalità

• Tutte le funzioni CSS filter: blur, brightness, contrast, saturate, hue-rotate, opacity, grayscale, sepia, invert e drop-shadow.
• Anteprima dal vivo: vedi i cambiamenti su un'immagine di esempio o sulla tua in tempo reale.
• Validazione dei valori: i cursori impongono gli intervalli validi per ogni funzione filter.
• Reimpostazione individuale: rimetti un singolo filtro al suo valore predefinito senza toccare gli altri.
• Output combinato: tutti i filtri selezionati sono combinati in una singola catena filter.

Domande frequenti

Si possono applicare i filtri CSS a video?

Sì. La proprietà filter CSS funziona su qualsiasi elemento, inclusi <video>, <img>, <div> e <canvas>. Applicato a un video, il filtro viene reso in tempo reale durante la riproduzione.

Qual è la differenza tra filter e backdrop-filter?

filter applica l'effetto all'elemento stesso e a tutti i suoi figli. backdrop-filter applica l'effetto al contenuto situato dietro (sotto) l'elemento, comunemente usato per effetti di vetro smerigliato.

I filtri CSS influiscono sulle prestazioni?

I filtri con sfocatura o compositing complesso possono essere impegnativi per la GPU. Per filtri animati, assicurati che l'elemento sia sul proprio layer di compositing (aggiungi transform: translateZ(0) come indicazione). I filtri statici su immagini e icone hanno un impatto minimo.

Cosa fa davvero il CSS filter

La proprietà CSS filter applica effetti grafici (sfocatura, regolazione del contrasto, spostamento del colore, ombra portata) a un elemento e ai suoi figli prima che il browser lo dipinga sullo schermo. L'elaborazione avviene interamente nel pipeline di rendering del browser, di solito accelerato dalla GPU, senza JavaScript coinvolto. Gli effetti sono solo visivi: l'HTML sottostante, il file a cui un'immagine fa riferimento e il layout sono tutti invariati. Una fotografia visualizzata con filter: grayscale(1) ha ancora i suoi colori originali nel file; il browser converte in scala di grigi solo nella visualizzazione.

Il CSS filter espone dieci funzioni: blur(px) per sfocatura gaussiana, brightness(n) e contrast(n) per regolazioni tonali, saturate(n) per intensità del colore, hue-rotate(deg) per spostare la ruota dei colori, opacity(n) per trasparenza, grayscale(n) e sepia(n) per effetti di desaturazione, invert(n) per output negativo, e drop-shadow(...) per ombre consapevoli della forma (a differenza di box-shadow, drop-shadow segue la forma effettivamente renderizzata inclusa la trasparenza, ideale per ombre su icone o immagini PNG con bordi ritagliati). Le funzioni si concatenano: filter: brightness(1.2) contrast(1.3) saturate(0.9) applica tutte e tre in sequenza.

Perché questo è importante per il design web moderno: un decennio fa, regolare luminosità, tonalità o saturazione dell'immagine per coerenza di design richiedeva preprocessare ogni immagine in Photoshop e riesportare. Il CSS filter porta le stesse regolazioni al runtime, applicate in modo non distruttivo. Puoi servire una singola immagine e presentarla in modi diversi in base a tema, stato hover o preferenza dell'utente. Puoi anche usare i filtri per l'accessibilità: una foto in scala di grigi invertita come placeholder, o un overlay di immagine scurita per la leggibilità del testo ad alto contrasto. Il compromesso è la prestazione per alcuni filtri (in particolare blur) e il fatto che i filtri influenzano anche i figli, il che può cascare in modo inaspettato.

Come funziona questo strumento sotto il cofano

Ogni slider nello strumento è legato a una singola funzione filter. Quando muovi uno slider, JavaScript legge il valore, costruisce la stringa della funzione filter con quel valore (ad esempio, brightness(1.4)) e concatena tutte le funzioni attive in una singola stringa CSS filter. Quella stringa viene applicata come stile inline sull'immagine di anteprima, producendo feedback visivo immediato mentre il browser ridipinge con il nuovo filtro. Nessun dato dell'immagine viene elaborato in JavaScript: la matematica a livello di pixel effettiva avviene dentro il motore di rendering del browser, di solito sulla GPU.

Il CSS generato mostrato nella casella del codice è la stessa stringa applicata all'anteprima. Clicca Copia CSS e lo strumento scrive quella stringa sulla tua clipboard usando la moderna API navigator.clipboard.writeText(). La stringa è pronta per essere incollata in qualsiasi attributo style di un elemento o qualsiasi dichiarazione di classe nel tuo foglio di stile. Lo strumento supporta anche il caricamento della tua immagine: scegli un file e diventa un URL blob: temporaneo nel browser, mai caricato da nessuna parte, e il filtro mostra l'anteprima sulla tua immagine reale così puoi calibrare l'aspetto esatto per il tuo contenuto.

Il comportamento di reset è per-filtro: ogni slider ha il suo pulsante di reset che riporta solo quel filtro al suo valore senza-effetto (1 per i moltiplicatori, 0deg per hue-rotate, 0px per blur). Il pulsante Reset All riporta ogni slider al neutro simultaneamente. Lo stato dello strumento vive solo in memoria; ricarica la pagina e la tua combinazione di filtri è sparita. Nessun server memorizza i tuoi valori filtro scelti, nessun analytics traccia quali combinazioni provi. Lo strumento è un playground CSS senza stato, supportato da pubblicità.

Breve storia dei filtri CSS

• Primitive di filtro SVG, 2001.SVG 1.0 (Raccomandazione W3C, settembre 2001) definisce un sistema di filtri completo: feGaussianBlur, feColorMatrix, feConvolveMatrix e decine di altri. Il modello di filtro SVG è potente ma verboso, e applicare filtri SVG agli elementi HTML richiede filter: url(#id) che fa riferimento a SVG inline, mai ampiamente adottato nei flussi di lavoro HTML-first.
• CSS Filter Effects Module Level 1, 2014.Il W3C pubblica Filter Effects Module Level 1 (dicembre 2014), introducendo le funzioni filter shorthand semplificate (blur, brightness, contrast, ecc.) che non richiedono SVG inline. Queste corrispondono alle esigenze di elaborazione delle immagini più comuni nel 95% dei casi e sono drammaticamente più facili da scrivere dei filtri SVG.
• Il supporto dei browser raggiunge la massa critica, 2015.Chrome 53 (2015) e Firefox 35 (2015) spediscono il supporto filter senza prefisso; Safari ha il supporto con prefisso dalla versione 6 (2012). Entro il 2015, il CSS filter è ampiamente utilizzabile sui siti di produzione. I designer iniziano a usare i filtri per effetti hover, normalizzazione delle immagini e trattamenti decorativi su larga scala.
• backdrop-filter arriva, dal 2017 al 2024.Safari 9 (2015) introduce -webkit-backdrop-filter per effetti vetro smerigliato. Chromium spedisce backdrop-filter senza prefisso in Chrome 76 (luglio 2019). Firefox attende fino alla versione 103 (luglio 2022). La nav bar smerigliata in stile iOS diventa un pattern UI moderno predefinito.
• Il dark mode spinge l'adozione dei filtri, 2019.Il trend di design dark mode (macOS Mojave di Apple 2018, Android 10 2019, iOS 13 2019, browser prefers-color-scheme 2019) accelera l'uso dei filtri per il CSS auto dark mode invert-and-hue-rotate, dove una singola regola filter: invert(1) hue-rotate(180deg) trasforma un sito in modalità chiara in una vista dark-mode accettabile senza riprogettazione.
• La complessità dei filtri SVG ritorna via CSS, dal 2024 in poi.Il CSS Filter Effects Module Level 2 (bozza) propone nuove funzioni e la capacità di comporre pipeline di filtri personalizzati senza SVG inline, colmando il divario tra le comode funzioni shorthand e la piena potenza delle primitive di filtro SVG. Il supporto dei browser è ancora in fase di rollout fino al 2025.

Flussi di lavoro reali

• Normalizzazione delle immagini coerente con il brand.Un sito che procura immagini da molti fotografi o provider di stock ottiene saturazione, contrasto e luminosità incoerenti. Applicare un filtro CSS uniforme a tutte le immagini (filter: saturate(0.85) contrast(1.05) brightness(0.95)) le porta tutte nella stessa palette di colori senza preprocessare ogni file. Inverti il filtro per un'immagine specifica quando vuoi che spicchi.
• Stati di hover e interazione.Gli effetti hover che usano transizioni filter sembrano rifiniti e leggeri. Le immagini delle card con filter: grayscale(0.5) a riposo e filter: grayscale(0) in hover creano un invito sottile a interagire. Le miniature di immagini con filter: brightness(0.9) a riposo e brightness(1.1) in hover fanno lo stesso senza richiedere due file immagine.
• UI in vetro smerigliato con backdrop-filter.Overlay modali, barre di navigazione sticky e popover di tooltip che usano backdrop-filter: blur(20px) su uno sfondo semi-trasparente producono l'effetto vetro smerigliato in stile iOS. Questo è ora atteso sui siti di marketing moderni; filter non si applica perché vogliamo sfocare ciò che è dietro l'overlay, non l'overlay stesso.
• Theming dinamico e dark mode.Dark mode economico: avvolgi il tuo sito in un container con filter: invert(1) hue-rotate(180deg) attivato tramite media query o toggle. Questo converte il testo scuro in chiaro, gli sfondi chiari in scuri, preservando la maggior parte dei colori. È una vittoria rapida che gestisce l'80% dei requisiti dark-mode senza progettare due temi. Le immagini reali dovrebbero essere escluse con un nidificato filter: invert(1) hue-rotate(180deg) per annullare l'inversione, altrimenti le foto sembrano strane.
• Strumenti di accessibilità e modalità ad alto contrasto.Gli utenti con problemi visivi possono applicare filtri a livello browser (estensione ad alto contrasto di Chrome, inversione a livello OS) ma i designer possono anche offrire toggle filter a livello sito: un pulsante che applica filter: contrast(2) a tutta la pagina per utenti ipovedenti. WebAIM e WCAG non lo richiedono, ma è una cortesia di accessibilità a basso costo che alcuni siti aggiungono.
• Trattamenti artistici delle foto.Toni seppia, look vintage, effetti foto blueprint e altri trattamenti artistici combinano funzioni filter: filter: sepia(1) hue-rotate(200deg) saturate(1.5) brightness(0.8) produce un look vintage dai toni freddi in una dichiarazione. Rispetto ai preset dell'editor di immagini, il CSS filter è non distruttivo e regolabile dal vivo senza riesportare.

Trappole comuni e cosa significano

• Blur è il filtro costoso.Tra le funzioni filter, blur() è la più intensiva per la GPU, specialmente a raggi grandi (oltre 20px) su elementi grandi. Animare blur o applicarlo a molti elementi contemporaneamente può far cadere il frame rate sensibilmente. Per le nav bar sticky smerigliate, il blur copre una piccola area e funziona bene; per blur modali a tutto schermo, aspettati un breve stutter sui dispositivi di fascia bassa. Altri filtri (contrast, brightness, saturate) sono quasi gratuiti nelle GPU moderne.
• I filtri influenzano tutti i discendenti.Applicare filter a un container influenza ogni elemento figlio al suo interno. Se avvolgi una card in un container con filter: grayscale(1), anche il testo all'interno diventa in scala di grigi (cosa che di solito non cambia nulla dato che il testo è già monocromatico) e qualsiasi elemento figlio colorato (icone, badge) perde il suo colore. Per filtrare solo specifici figli, applica il filtro su di loro individualmente, non sul genitore.
• Basso contrasto danneggia la leggibilità.Ridurre il contrasto (filter: contrast(0.5)) su una card con testo all'interno rende il testo più difficile da leggere, spesso facendolo scendere sotto il rapporto di contrasto WCAG AA 4.5:1 per il testo normale. Applica i filtri che riducono il contrasto con attenzione; controlla che qualsiasi testo sopra rimanga leggibile. Per elementi solo decorativi (immagini di sfondo, divisori), il contrasto ridotto va bene.
• I filtri non cambiano le aree di hit.A differenza di clip-path, il CSS filter non cambia l'area cliccabile di un elemento. Un pulsante con filter: blur(5px) sembra morbido e fuori fuoco ma è ancora completamente cliccabile attraverso il suo rettangolo originale. Questo è di solito desiderato ma può sorprendere quando un elemento ghosted o disabled-looking continua a innescarsi sul click. Combina filter con pointer-events: none per disabilitare effettivamente l'interazione.
• Safari ha bisogno del prefisso -webkit- per backdrop-filter.La proprietà di base filter è senza prefisso in tutti i browser moderni. Ma backdrop-filter richiede ancora il prefisso -webkit-backdrop-filter in Safari (incluso le versioni più recenti). Per effetti vetro smerigliato cross-browser, dichiara sia -webkit-backdrop-filter che backdrop-filter con lo stesso valore. Gli auto-prefisseri gestiscono questo; se scrivi CSS a mano, ricordati del prefisso.
• Animare catene di filtri è a scatti.Le transizioni CSS su filter interpolano fluidamente quando la catena di filtri rimane la stessa (ad esempio, transitando da blur(0px) a blur(10px)). Ma aggiungere o rimuovere funzioni a metà transizione (ad esempio, transitando da blur(0px) a blur(10px) brightness(1.2)) scatta bruscamente. Per transizioni multi-filtro fluide, dichiara tutti i filtri sia negli stati di inizio che di fine con i valori di riferimento appropriati (brightness(1) è il default).

Privacy: tutto avviene nel tuo browser

Gli strumenti generatori di CSS arrivano in due varianti: semplici pagine HTML che eseguono JavaScript lato client (private, veloci) ed editor cloud che salvano i tuoi progetti (collaborativi ma con compromessi di privacy). Questo strumento è del primo tipo. I valori dei tuoi slider, il tuo CSS generato e anche qualsiasi immagine che carichi per l'anteprima rimangono interamente nella tua sessione browser. Ricarica la pagina e lo stato è sparito a meno che tu non abbia copiato il CSS prima o salvato uno screenshot.

La funzione carica la tua immagine merita una nota sulla privacy: quando scegli un file, il browser crea un URL blob: locale che punta alla memoria, e l'anteprima visualizza la tua immagine con il filtro applicato. Nessuna richiesta va a nessun server. Apri la scheda Network del browser durante il caricamento; vedrai zero traffico in uscita. L'immagine esiste solo nella memoria della scheda del tuo browser e viene cancellata quando chiudi la scheda. Per immagini riservate (design proprietari, scansioni mediche, screenshot protetti da NDA), questa è la proprietà di privacy che conta.

Quando un altro strumento è la scelta giusta

• Photoshop o Lightroom per modifiche permanenti.Il CSS filter è solo al momento della visualizzazione: il file immagine sottostante è invariato. Se vuoi che il file immagine effettivo abbia quelle regolazioni incorporate (dimensione file più piccola, caricamento pagina più veloce, nessun rischio di fallback non filtrato nei browser più vecchi), modifica l'immagine in Photoshop, Lightroom, GIMP o Affinity Photo. Il CSS filter è per la visualizzazione dinamica; gli editor di immagini sono per l'elaborazione permanente.
• Image Filters per elaborazione batch occasionale.Il nostro strumento Image Filters applica effetti filter simili ma produce un PNG/JPG scaricabile con il filtro incorporato. Per elaborare molte immagini in modo coerente per un portfolio, set di social media o libreria di asset, quel flusso di lavoro è più veloce dell'applicazione di filtri CSS al runtime. Entrambi gli strumenti servono casi d'uso diversi.
• Filtro SVG per effetti complessi.Gli shorthand del CSS filter coprono la maggior parte delle esigenze ma non tutto. Distorsione ondulata, kernel di convoluzione personalizzati (rilevamento bordi, embossing), pattern di rumore feTurbulence, mappe di spostamento: tutto richiede primitive di filtro SVG tramite SVG inline più filter: url(#myFilter). Scrivere filtri SVG è più difficile ma sblocca effetti che lo shorthand CSS filter non può produrre.
• Proprietà personalizzate CSS per il theming.Il trucco invert dark mode che usa filter ha limitazioni: le foto sembrano sbagliate, i colori si spostano, le prestazioni possono soffrire. Per dark mode di qualità produzione, le proprietà personalizzate CSS (--bg-color, --text-color) con due set di temi distinti sono più pulite. Dark mode basato su filtri è una vittoria rapida, non una soluzione raffinata.

Altre domande frequenti

Posso animare i cambiamenti del CSS filter in modo fluido?

Sì, con avvertimenti. La proprietà filter è animabile in CSS, e le transizioni tra due catene di filtri con le stesse funzioni nello stesso ordine interpolano fluidamente (blur(0px) brightness(1) a blur(10px) brightness(1.5) funziona). Aggiungere o rimuovere funzioni a metà transizione scatta bruscamente. Per animazione multi-filtro fluida, elenca ogni funzione che vuoi transitare sia negli stati di inizio che di fine, usando valori neutri (brightness(1), saturate(1), blur(0px)) dove non vuoi un filtro specifico applicato.

Il CSS filter funziona sulle immagini di sfondo?

Sì. Il CSS filter si applica all'intero elemento incluso il suo sfondo, contenuto ed elementi figli. Se vuoi filtrare solo l'immagine di sfondo ma non il contenuto in primo piano, l'approccio tipico è usare un elemento figlio separato per lo sfondo (ad esempio, uno pseudo-elemento ::before posizionato) con il filtro applicato ad esso, poi posizionare il contenuto come fratello non filtrato sopra. Anche la proprietà backdrop-filter è utile quando vuoi filtrare ciò che è visibile dietro un elemento trasparente.

I filtri CSS sono indicizzati dai motori di ricerca?

I filtri CSS sono puramente visivi e non cambiano il contenuto HTML. I motori di ricerca indicizzano il contenuto sottostante (alt text delle immagini, testo circostante) come se il filtro non fosse applicato. Un'immagine in scala di grigi con filter: grayscale(1) è ancora indicizzata come l'immagine originale a colori in base al suo file e al suo alt text. Questo è generalmente quello che vuoi: nessun effetto collaterale del filtro sul SEO o sugli screen reader.

Perché drop-shadow sembra diverso da box-shadow?

Box-shadow disegna un'ombra attorno al box rettangolare di un elemento, ignorando qualsiasi trasparenza. Drop-shadow (filter) disegna un'ombra che segue la forma effettivamente renderizzata, incluse le regioni trasparenti. Per un'icona SVG con bordi ritagliati o un PNG con trasparenza, drop-shadow produce un'ombra consapevole della forma che corrisponde al contorno visibile. Box-shadow sullo stesso elemento mostrerebbe un'ombra rettangolare attorno al bounding box, che sembra sbagliata. Usa drop-shadow per ombre consapevoli della forma, box-shadow per elementi rettangolari.

Qual è la differenza tra opacity e filter: opacity()?

Nella maggior parte dei browser producono risultati visivamente identici. La differenza tecnica: opacity è una proprietà di alto livello, mentre filter: opacity() è parte della catena di filtri e si compone con altri filtri. Se hai filter: blur(5px) opacity(0.5), entrambi si applicano insieme come una singola operazione GPU. Usare opacity fuori dalla catena di filtri funziona allo stesso modo nella maggior parte dei casi. Mantieni opacity per la trasparenza autonoma; usa filter: opacity() solo quando concateni con altri filtri.

Posso resettare tutti i filtri rapidamente?

Sì. Imposta filter: none per rimuovere tutti i filtri in una dichiarazione. Questo è il modo più pulito di resettare, specialmente per stati hover dove vuoi rimuovere tutti gli effetti filtro all'hover-out. In alternativa, imposta ogni funzione filtro al suo valore neutro: filter: brightness(1) contrast(1) saturate(1) blur(0px) hue-rotate(0deg) grayscale(0) sepia(0) invert(0) opacity(1) è funzionalmente equivalente a filter: none ma più verboso.