Design / CSS

Generatore CSS Glassmorphism (effetto vetro satinato)

Crea l’effetto vetro satinato con CSS backdrop-filter: regola sfocatura, colore della tinta, opacità, saturazione, bordo e raggio degli angoli su un’anteprima colorata, quindi copia il CSS compatibile con tutti i browser attuali.

Generatore CSS Glassmorphism (effetto vetro satinato): backdrop-filter: blur() sfoca ciò che si trova dietro l’elemento, mentre saturate() rende quei colori più intensi. Uno sfondo semitrasparente dà una tinta al vetro e un sottile bordo chiaro ne mette in risalto il contorno, come nel vetro vero. La riga con prefisso -webkit- garantisce la compatibilità con le versioni di Safari precedenti alla 18. Funziona al 100% localmente nel browser, senza caricare file sul server.

Categoria
Strumenti per sviluppatori
Esecuzioni
Nel browser
Costo
Gratuito · senza registrazione
Disponibilità
Pronto all'uso
Generatore di glassmorphismElaborazione locale

Funziona interamente nel browser

Vetro satinatoI colori dietro questa scheda sono sfocati.

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

L’effetto richiede qualcosa di colorato dietro l’elemento: backdrop-filter sfoca ciò che si trova sotto, mentre lo sfondo semitrasparente lo lascia trasparire. La riga -webkit- serve per Safari nelle versioni precedenti alla 18. Verifica che il testo sul vetro mantenga un contrasto sufficiente su ogni parte dello sfondo.

Accessibilità

Alcune persone attivano la trasparenza ridotta nelle impostazioni di sistema. La media query prefers-reduced-transparency, supportata dai browser basati su Chromium, può sostituire per loro il vetro con uno sfondo uniforme.

Abbinamento a un'ombra

Un'ombra morbida e ampia solleva la scheda dallo sfondo; regolala con il generatore di box shadow e sostituisci la riga box-shadow.

Come usarlo

  1. Imposta sfocatura, opacità e saturazione.
  2. Scegli tinta, bordo e raggio degli angoli.
  3. Copia il CSS e posiziona l’elemento su uno sfondo colorato.

Privacy e limitazioni

Tutto funziona nel browser.

Strumenti correlati

Box shadowGradiente CSSpattern CSS

Domande frequenti

Perché il mio vetro sembra uniforme?

Dietro deve esserci qualcosa di colorato o ricco di dettagli: su un colore uniforme, la sfocatura non ha nulla da sfocare.

backdrop-filter è lento?

Richiede più risorse rispetto alla maggior parte delle proprietà CSS, soprattutto quando aree estese scorrono sopra contenuti in movimento; mantieni piccole le aree sfocate ed evita di sovrapporne troppe.

Il testo è leggibile?

Verificalo: il contrasto cambia in base allo sfondo. Una tinta più scura, una maggiore opacità o un’ombra del testo possono aiutare.

Strumento gratuito · nel browser esecuzioni · senza account