Generatore di filtri CSS

Regola gli effetti come sfocatura e luminosità con i cursori e genera il codice CSS filter in anteprima

Informazioni sugli aggiornamentiGeneratore di filtri CSS aggiunto: regola sfocatura e luminosità per generareVisualizza aggiornamenti

Caratteristiche

9 tipi di effetti con cursori

L'anteprima e il codice CSS cambiano simultaneamente ogni volta che muovi i cursori

Prova con le tue immagini

Visualizza le tue immagini nel browser e controlla gli effetti

Solo l'immagine originale mentre premuto

Confronta l'immagine prima e dopo l'effetto in tempo reale

Perfeziona da 8 campioni

Inizia dai campioni come tono seppia o vintage e affina i dettagli

Come usare

Scegli un'immagine

Seleziona la tua immagine con "Seleziona la tua immagine". Se non scegli nulla, puoi provare con l'immagine campione incorporata

Regola l'effetto

Scegli un campione simile all'atmosfera desiderata oppure regola l'intensità dell'effetto con i singoli cursori

Confronta prima e dopo

Premi "Confronta con l'immagine originale" per visualizzare l'immagine senza effetti mentre lo tieni premuto

Copia il codice

Premi il pulsante "Copia" per incollare la riga del filter nel tuo CSS

Casi d'uso

Leggibilità del testo su foto di sfondo

Sfoca leggermente la foto di sfondo per rendere i titoli sovrapposti più leggibili

Uniformità del tono della foto

Uniforma le foto in pagine team o gallerie in bianco e nero o seppia

Determinazione dei valori con foto personali

Applica i valori alle foto che utilizzerai effettivamente per determinare i numeri per effetti opachi o vintage

Regolazione delle immagini per la modalità scura

Determina i valori riducendo luminosità e contrasto in modo che le immagini non siano abbaglianti su sfondi scuri

Conoscenze di base

Funzioni e unità di filter

La proprietà CSS filter è una proprietà che applica effetti all'aspetto di immagini e elementi e si scrive elencando funzioni come blur e sepia separate da spazi.

px (pixel)：La funzione blur specifica il raggio di sfocatura in px; se specifichi 4px, i colori si sfumano in un raggio di 4 pixel.
% (percentuale)：Le funzioni brightness e sepia specificano l'intensità dell'effetto in %; nella funzione brightness, il 100% è la luminosità originale e il 120% è lo stato di 20% più luminoso.
deg (gradi)：La funzione hue-rotate specifica l'angolo di rotazione del colore sulla ruota cromatica in deg; se specifichi 180deg, il colore si sposta al colore opposto sulla ruota cromatica.

Perché il risultato cambia in base all'ordine di scrittura

Le funzioni elencate in filter vengono applicate da sinistra a destra, e l'effetto successivo viene applicato al risultato dell'effetto precedente, quindi il risultato può cambiare se l'ordine viene modificato. Ad esempio, se applichi il bianco e nero e poi la seppia, rimane una tinta marrone; se applichi la seppia e poi il bianco e nero, la tinta marrone scompare. In questo strumento l'ordine di applicazione è fisso, ma puoi modificare l'ordine editando il codice CSS generato.

Differenza con backdrop-filter

filter e backdrop-filter sono proprietà che usano le stesse funzioni, ma l'elemento a cui viene applicato l'effetto è diverso.

filter：filter è una proprietà che applica effetti all'aspetto dell'elemento stesso specificato (immagini, testo, ecc.).
backdrop-filter：backdrop-filter è una proprietà che applica effetti alla parte visibile dietro l'elemento specificato ed è utilizzata per creare effetti come il vetro smerigliato.

Sicurezza e privacy

Elaborazione nel browser

I dati inseriti vengono elaborati solo all'interno del tuo browser e non vengono inviati all'esterno.

Elaborazione solo nel browser

Visualizzazione dell'immagine e generazione del codice CSS viene elaborato interamente nel tuo browser e i dati di input non vengono inviati ai server.