Categoria: Sviluppo
Generatore di Filtri CSS
Costruisci una dichiarazione filter CSS con slider in tempo reale
Regola sfocatura, luminosità, contrasto, scala di grigi, rotazione della tonalità, inversione, opacità, saturazione e seppia con degli slider, visualizza in tempo reale l'effetto combinato e copia la dichiarazione CSS filter risultante.
filter: none;
Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.
A cosa serve
La proprietà CSS filter applica effetti grafici come la sfocatura e la regolazione del colore direttamente nel browser, senza modificare l'immagine sorgente. Combinare più funzioni in un'unica dichiarazione è complicato da scrivere a mano — questo strumento costruisce la stringa per te man mano che regoli ogni effetto, includendo solo le funzioni che hai effettivamente modificato.
Come si usa
- Trascina gli slider per regolare ogni funzione di filtro.
- Osserva l'anteprima aggiornarsi in tempo reale.
- Copia la dichiarazione filter generata nel tuo foglio di stile.
Privacy
Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.
Domande frequenti
- Posso applicarlo a un'immagine di sfondo invece che a un elemento?
- Sì — filter funziona su qualsiasi elemento, compresi quelli con un background-image. Per sfocare solo lo sfondo dietro un elemento (non il suo contenuto), usa invece backdrop-filter.
- filter influisce sulle prestazioni?
- Filtri complessi o animati, specialmente la sfocatura, possono essere costosi da renderizzare a dimensioni grandi. Testa sui dispositivi reali che stai targettizzando prima di pubblicare un filtro animato.
- Perché l'ordine delle funzioni filter è importante?
- Ogni funzione viene applicata all'output della precedente, quindi grayscale(100%) sepia(50%) può apparire diverso dall'ordine inverso. Questo strumento le applica in un ordine fisso e sensato.