Generatore di glassmorphism

Cos'è un generatore di glassmorphism / neumorphism?

*Glassmorphism* e *neumorphism* sono due stili di superficie che si vedono ovunque nel web design moderno. Il **vetro** è l'effetto lastra smerigliata: una card traslucida che sfoca ciò che sta dietro, spesso sovrapposta a un gradiente colorato o a una foto. Il **neumorphism** è l'effetto plastica morbida: una card che sembra sporgere (o sprofondare) dalla superficie, illuminata da coppie di ombre chiare e scure della stessa tonalità dello sfondo.

Entrambi gli effetti sono puro CSS: niente immagini, niente JavaScript, niente librerie. Il vetro si basa su backdrop-filter: blur() più un riempimento traslucido e un bordo sottile. Il neumorphism è costruito con una coppia di dichiarazioni box-shadow: una leggermente più scura della superficie, una leggermente più chiara, spostate in direzioni opposte. I calcoli sono brevi, ma regolare i valori a mano finché tutto torna richiede tempo. Un generatore ti fa saltare questo passaggio.

Questo strumento ti dà cursori per ogni parametro importante, un riquadro di anteprima su uno sfondo configurabile (così l'effetto vetro ha davvero qualcosa da rifrangere) e la copia con un clic del CSS risultante. Tutto gira nel browser: incolla il frammento direttamente nel tuo foglio di stile.

Cosa imparerai giocando con queste superfici

• backdrop-filter è la proprietà alla base del glassmorphism: sfoca e satura ciò che sta *dietro* l'elemento, non l'elemento stesso.
• Il vetro ha bisogno di un riempimento traslucido (rgba(...) con alpha basso) e di un bordo chiaro sottile per sembrare un vero materiale smerigliato; togli uno dei due e l'effetto crolla.
• Il neumorphism usa **due** dichiarazioni box-shadow, non una: un'ombra più scura in basso a destra e una luce più chiara in alto a sinistra, entrambe nella tonalità della superficie invece che nero o bianco puro.
• Un neumorphism *inset* sostituisce semplicemente le ombre con la parola chiave inset: stessi numeri, direzione visiva opposta (premuto, non in rilievo).
• Il vetro ha bisogno di uno sfondo colorato per essere leggibile: mettilo su un bianco uniforme e la sfocatura non ha nulla su cui lavorare.

Come generare una superficie in vetro o neumorphism passo dopo passo

1. 1

   Scegli lo stile

   Passa da **Vetro** a **Neumorphism** in alto. Il vetro ha bisogno di uno sfondo; il neumorphism poggia su un colore di superficie uniforme che controlli tu.

2. 2

   Regola i parametri principali

   Per il vetro le leve principali sono la *sfocatura* (quanto viene sbavato lo sfondo), l'*opacità dello sfondo* (quanto è traslucida la card) e la *tinta* (una leggera dominante di colore). Per il neumorphism sono la *distanza* (quanto sono spostate le ombre), la *sfocatura* (quanto sono morbide) e l'*intensità* (quanto le ombre chiara e scura si discostano dalla superficie).

3. 3

   Scegli uno sfondo o un colore di superficie

   Il vetro rende meglio su un gradiente deciso o una foto. Il neumorphism rende meglio su un colore morbido, non del tutto puro (#e0e5ec è il classico "grigio neumorfico"). Lo strumento include una serie di preset da cliccare.

4. 4

   Cambia lo stile del neumorphism

   Il neumorphism ha tre varianti: **In rilievo** (sporgente), **Piatto** (stesse ombre, senza riempimento sfumato) e **Incassato** (premuto). Provale tutte e tre: condividono gli stessi calcoli delle ombre, cambia solo la direzione.

5. 5

   Copia il CSS

   Premi **Copia** e incolla il frammento nel tuo foglio di stile. L'output è pronto per la produzione: include -webkit-backdrop-filter con prefisso per le versioni più vecchie di Safari, proprietà ordinate e il border-radius corrispondente, così funziona come un'unica classe.

Riferimento rapido per vetro e neumorphism

Le proprietà su cui si basa davvero ciascun effetto. Riferimento completo nelle pagine MDN di backdrop-filter e box-shadow.

Esempi di superfici da provare

background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow:  16px 16px 32px #b8bcc1,  -16px -16px 32px #ffffff;

background: #e0e5ec;border-radius: 24px;box-shadow:  inset 8px 8px 16px #b8bcc1,  inset -8px -8px 16px #ffffff;

Errori comuni con vetro e neumorphism

• Dimenticare -webkit-backdrop-filter. Le versioni più vecchie di Safari (e qualsiasi WebView integrata) ignorano backdrop-filter senza il prefisso e il tuo vetro diventa un blocco pieno.
• Usare nero e bianco puri per le ombre neumorfiche. Il neumorphism ben fatto usa due colori **vicini** alla tonalità della superficie: ombre nere e bianche fanno sembrare la card economica.
• Mettere il vetro su un bianco uniforme. Dietro la sfocatura non c'è colore, quindi l'effetto sparisce e resta un riquadro appena tinto. Il vetro ha bisogno di uno sfondo movimentato.
• Sovrapporre troppi livelli di backdrop-filter. Ognuno è un passaggio di sfocatura in tempo reale sulla GPU: tre o quattro nella stessa schermata e la tua dashboard inizia a perdere frame.
• Saltare i controlli di accessibilità. Il testo sul vetro spesso non supera il contrasto WCAG perché lo sfondo traspare: abbina sempre una card di vetro a un colore del testo più scuro di quello che useresti su un bianco opaco.

Domande frequenti sul Glassmorphism Generator