Generatore di effetti di filtro di sfondo CSS.
Generatore gratuito di effetti di filtro di sfondo CSS, senza necessità di installazione. Strumento per la creazione di effetti glassmorphism e sfocatura.
Informazioni su CSS backdrop-filter
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.
Come utilizzare
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.
Cursori dei filtri e intervalli
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.
▶Perché l'anteprima sembra diversa dal mio sito reale?
▶Il CSS copiato include il prefisso -webkit-?
▶Perché un filtro manca dal mio output?
▶Posso usare un'immagine di sfondo invece di un gradiente?
Se questo strumento è stato di aiuto per te, considera l’idea di regalarmi un caffè.
Comprami un caffè.