Generatore CSS Filter
Costruisci una catena riordinabile di funzioni CSS filter() e backdrop-filter() e visualizzala in anteprima dal vivo sulla tua foto caricata, con una riga CSS copiabile ed esportazione PNG.
🔒 Elaborato interamente nel tuo browser: nulla di ciò che inserisci qui verrà mai caricato.
Risultato
Ogni generatore di filtri CSS ti permette di impilare blur(), brightness(), contrast() e gli altri — ma quasi nessuno fa sì che l'ordine conti, perché la maggior parte applica i filtri sempre in una sequenza fissa. Questo è diverso: la catena di filtri è una lista realmente riordinabile costruita con il drag-and-drop nativo HTML5, e invertire l'ordine di due funzioni cambia realmente i pixel renderizzati, esattamente come farebbe nel CSS in produzione. Applicare blur e poi hue-rotate ha un aspetto diverso da hue-rotate e poi blur, e ora puoi capire perché prima di rilasciarlo.
Carica la tua foto e le nove funzioni concatenabili — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert e drop-shadow — si applicano in tempo reale come vera dichiarazione CSS `filter` su un elemento `<img>`, non su un campione simulato. Aggiungi una funzione dal selettore, trascina la sua riga in alto o in basso per cambiare posizione nella catena, regola lo slider e l'anteprima e la riga `filter: ...;` copiabile si aggiornano a ogni input. Rimuovi un passaggio con il suo pulsante dedicato, direttamente nella riga.
Una seconda catena, più piccola, costruisce un valore `backdrop-filter` applicato a un pannello in sovraimpressione posizionato sopra l'anteprima, così puoi vedere l'effetto vetro smerigliato — la tecnica dietro le moderne barre di navigazione traslucide e gli sfondi modali — senza toccare la catena di filtri dell'immagine sottostante. Funziona anche prima di caricare una foto, sullo sfondo colorato segnaposto, così puoi mettere a punto un design a pannello smerigliato in pochi secondi.
Quando l'anteprima ti soddisfa, copia il CSS direttamente dal riquadro di output oppure esporta un vero PNG: la stessa stringa di filtro viene passata alla proprietà `ctx.filter` di un contesto Canvas 2D — che usa la sintassi identica alla proprietà CSS `filter` — e il canvas viene convertito in un file scaricabile con `canvas.toBlob()`. L'immagine esportata corrisponde esattamente all'anteprima dal vivo, perché è prodotta dalla stessa stringa di filtro eseguita attraverso la stessa primitiva di rendering. Tutto avviene localmente nel tuo browser; la tua foto non viene mai caricata da nessuna parte.