Generatore di effetti di filtro di sfondo CSS.

Crea CSS backdrop-filter dal vivo trascinando i cursori di nove funzioni di filtro: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate e sepia. L'output emette sia backdrop-filter sia -webkit-backdrop-filter affinché l'effetto funzioni nei browser moderni e viene renderizzata una scheda di vetro su uno sfondo personalizzabile per vedere il risultato mentre lo regoli.

1. Facoltativamente fai clic su un preset (Frosted Glass, Dark Glass, Vintage, Inverted) per partire da un look curato. 2. Trascina i cursori nel pannello Controls; ogni filtro appare nel CSS generato solo quando differisce dal suo valore predefinito (ad es. brightness/contrast/saturate/opacity predefinito 100, blur predefinito 0). 3. Modifica il campo Background con qualsiasi valore CSS background valido (gradiente, url di immagine, colore) per testare il filtro su contenuti diversi. 4. Fai clic su Copy per copiare entrambe le dichiarazioni backdrop-filter e -webkit-backdrop-filter.

blur 0–50px; brightness 0–200% (predefinito 100); contrast 0–200% (predefinito 100); grayscale 0–100%; hue-rotate 0–360deg; invert 0–100%; opacity 0–100% (predefinito 100); saturate 0–200% (predefinito 100); sepia 0–100%. Reset ripristina ogni cursore al suo valore predefinito. I filtri al loro valore neutro sono omessi dall'output; se tutti sono neutri l'output è backdrop-filter: none.