Perché il mio effetto vetro sembra un colore piatto?

sfondo-filtro solo sfoca il contenuto seduto dietro l'elemento. Se non c'è nulla di colorato o occupato dietro la vostra carta, il blur non ha nulla con cui lavorare. Posizionare la carta di vetro sopra un'immagine o un gradiente vivido per vedere l'effetto.

Mi serve la linea -webkit-backdrop-filter?

Sì, per Safari. I browser basati su WebKit, specialmente su iOS, richiedono ancora il prefisso -webkit-backdrop-filter. Questo generatore lo include automaticamente accanto alla proprietà standard.

Lo sfondo-filtro è ampiamente supportato?

Funziona in tutte le versioni attuali di Chrome, Edge, Firefox e Safari. Per i browser molto vecchi, l'elemento mostra semplicemente il suo sfondo semi-trasparente senza la sfocatura, che degrada con grazia.

Generatore di vetro CSS

Creare visivamente l'aspetto di vetro satinato — sintonizzare sfocatura, trasparenza, saturazione, bordo e ombra, quindi copiare CSS di produzione pronta.

tool.glassmorphism.presets

tool.glassmorphism.backdrop tool.glassmorphism.light tool.glassmorphism.dark

tool.glassmorphism.blur

tool.glassmorphism.saturation

tool.glassmorphism.fillColor

tool.glassmorphism.fillOpacity

tool.glassmorphism.borderOpacity

tool.glassmorphism.borderRadius

tool.glassmorphism.dropShadow

tool.glassmorphism.shadowIntensity

tool.glassmorphism.preview

tool.glassmorphism.glass

tool.glassmorphism.css

Was this tool helpful?

Send output to:

How to use Glassmorphism Generator

Scegli uno sfondo chiaro o scuro, quindi imposta gli importi di sfocatura e saturazione.
Scegliere un colore di riempimento e regolare la sua opacità quindi lo sfondo mostra attraverso.
Sintonizzare l'opacità di confine, il raggio d'angolo e l'ombra di goccia opzionale fino a quando la carta sembra a destra.
Fare clic su Copia CSS per copiare il regolamento completo, compreso il -webkit-backdrop-filter fallback.

Che cos'e'?

Glassmorphism è l'effetto UI in vetro satinato costruito sulla proprietà CSS backdrop-filter Un riempimento semi-trasparente permette di mostrare lo sfondo, mentre backdrop-filter: blur() blurs che cosa siede dietro l'elemento e saturate() aumenta i colori per quel bagliore vetrato. Questo generatore prevede una carta di vetro su un gradiente colorato in modo che il blur sia effettivamente visibile, e emette un regolamento completo tra cui sia backdrop-filter e il -webkit-backdrop-filter fallback, lo sfondo rgba, un bordo traslucido sottile, il bordo-radio e un'ombra morbida opzionale

Advertisement

`FAQ`

Perché il mio effetto vetro sembra un colore piatto?: sfondo-filtro solo sfoca il contenuto seduto dietro l'elemento. Se non c'è nulla di colorato o occupato dietro la vostra carta, il blur non ha nulla con cui lavorare. Posizionare la carta di vetro sopra un'immagine o un gradiente vivido per vedere l'effetto.
Mi serve la linea -webkit-backdrop-filter?: Sì, per Safari. I browser basati su WebKit, specialmente su iOS, richiedono ancora il prefisso -webkit-backdrop-filter. Questo generatore lo include automaticamente accanto alla proprietà standard.
Lo sfondo-filtro è ampiamente supportato?: Funziona in tutte le versioni attuali di Chrome, Edge, Firefox e Safari. Per i browser molto vecchi, l'elemento mostra semplicemente il suo sfondo semi-trasparente senza la sfocatura, che degrada con grazia.

`Related tools`

`Author`

MWMarcus Webb"The DevTool Craftsman"
Full-Stack Developer & Tools Architect
Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Glassmorphism Generator on Wikipedia·Developer Tools on Wikipedia·Glassmorphism Generator on Britannica

`People also use`

← Back to Developer Tools · All tags

Last updated: 2026-06-03