Banco di prova per i filtri CSS
CSS Filter Playground
Sovrappone su un campione i filtri di sfocatura, luminosità, saturazione, tonalità e ombra portata e restituisce il CSS.
Impila le funzioni di filtro CSS su un campione e restituisce la dichiarazione. L’anteprima è disegnata dalla proprietà `filter` del browser stesso, quindi ciò che si vede è per definizione quello che fa il CSS e non una sua approssimazione. Il di più qui è la `feColorMatrix` equivalente: ognuna di queste funzioni tranne la sfocatura e la drop-shadow è affine in RGBA, quindi una catena di otto collassa in venti numeri.
Anteprima
Lo disegna la proprietà filter del browser stesso, quindi questo è quello che fa il CSS qui sotto, non un’approssimazione.
CSS
Filtri
Come si usa
Scegliere che cosa guardare
I campioni pieni mostrano che cosa succede a colori precisi, il gradiente mostra che cosa succede lungo un intervallo che comprende i grigi, e la propria immagine mostra che cosa succede alla cosa che si sta davvero filtrando. Prima di mandare in produzione, il giudizio va dato su quest’ultima.
Muovere le funzioni che servono
Tutto ciò che resta al valore neutro viene omesso del tutto dall’output, così il CSS resta corto quanto le modifiche fatte. L’ordine conta e segue l’ordine dell’elenco.
Aggiungere la drop-shadow per ultima, se serve
È un blocco a parte perché prende tre numeri e un colore invece di una sola quantità, e perché segue il canale alfa: ricalca la forma di un PNG trasparente invece del suo riquadro.
Prendere il CSS, oppure prendere la matrice
Il CSS serve per un foglio di stile. La `feColorMatrix` serve per un filtro SVG, uno shader o qualunque catena in cui valga la pena evitare otto passate per fare quello che fa una sola moltiplicazione di matrice.
Domande frequenti
Perché la sfocatura non è nella matrice?
Perché è spaziale: un pixel sfocato dipende dai suoi vicini, e una matrice di colore guarda sempre e solo un pixel alla volta. Lo stesso vale per la drop-shadow. Il pannello nomina quelle che non si sono potute far collassare e le lascia come passaggio a parte, invece di eliminarle in silenzio.
hue-rotate(180deg) non mi ha dato il colore complementare.
Non lo fa mai. La funzione è una rotazione attorno all’asse di luminanza del cubo RGB non lineare, che la specifica definisce con una matrice fissa: non è una rotazione percettiva della tonalità e non è stata progettata per esserlo. Per un complementare vero, la tonalità va ruotata in OKLCH con il convertitore di colori o con il generatore di tavolozze.
grayscale(1) usa i coefficienti di luminanza giusti?
Usa quelli imposti dalla specifica: Rec. 709, applicati a valori codificati in gamma. Applicare pesi di luminanza a valori non lineari è, in senso stretto, sbagliato: una desaturazione fatta bene linearizza prima. La specifica dice di farlo così e i browser lo fanno, quindi qui la discrepanza viene riprodotta invece che corretta, perché il punto è concordare con il browser.
Vale anche per backdrop-filter?
Le funzioni sono le stesse, quindi il valore che si copia è valido anche lì. Quello che cambia è la sorgente — `backdrop-filter` filtra ciò che è disegnato dietro l’elemento, non l’elemento — perciò l’anteprima qui non dirà come apparirà un pannello smerigliato sopra il contenuto reale. Va incollato nella pagina e guardato lì.
Può ricevere da
Generatore di ombre CSS
Box Shadow Generator
Compone ombre di riquadro e di testo su più livelli con anteprima dal vivo e restituisce il CSS.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Luminosità e regolazioni di colore
Brightness & Colour Adjust
Regola luminosità, contrasto, saturazione, temperatura e nitidezza con un istogramma dal vivo.
Generatore di ombre CSS
Box Shadow Generator
Compone ombre di riquadro e di testo su più livelli con anteprima dal vivo e restituisce il CSS.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.