Neumorfismo CSS Design Guida Completa

Padroneggia la tecnica soft UI con doppie ombre, requisiti di colore e considerazioni sull'accessibilità.

2 ombre richieste Palette monocromatica Problemi contrasto WCAG

Il neumorfismo è emerso nel 2020 come tendenza di design che mescola skeuomorfismo e flat design. Crea l'illusione di elementi estrusi o incassati nello sfondo usando ombre posizionate con cura.

La tecnica si basa su una palette monocromatica e due ombre opposte — una chiara, una scura — applicate allo stesso elemento. Comprendere la matematica dietro di essa sblocca risultati coerenti e professionali.

Cos'è il neumorfismo

Il neumorfismo crea un aspetto morbido ed estruso posizionando un'ombra chiara in alto a sinistra e una scura in basso a destra. Lo sfondo e l'elemento condividono lo stesso colore base, creando una fusione invisibile. A differenza del flat design, il neumorfismo implica profondità fisica senza dettagli fotorealistici.

Tool gratuito Generatore Neumorphism Crea effetti soft UI estrusi con doppie ombre box

La tecnica delle doppie ombre

Il nucleo del neumorfismo è la doppia box-shadow: un'ombra chiara offset verso la sorgente luminosa (alto-sinistra) e una scura offset lontano da essa (basso-destra). Il colore dell'ombra si ottiene schiarendo e scurendo la tinta di sfondo del 10–15%. Entrambe le ombre usano un blur di 20–30px.

Requisiti di colore

Il neumorfismo funziona solo in un intervallo di colori ristretto. Lo sfondo deve essere un tono medio e le ombre chiare e scure devono condividere la stessa tinta. Ecco il pattern CSS:

.card {
  background: #e0e5ec;
  box-shadow:
    8px 8px 20px #b8bec7,
    -8px -8px 20px #ffffff;
  border-radius: 12px;
}
Tool gratuito Generatore Glassmorphism Crea effetti UI vetro smerigliato con CSS backdrop-filter

Convesso vs concavo

Gli elementi convessi (rialzati) usano ombre verso l'esterno: chiara in alto-sinistra, scura in basso-destra. Gli elementi concavi (premuti) usano ombre interne con la parola chiave `inset`, invertendo l'illusione. La combinazione di ombre esterne e interne può simulare un interruttore.

Problemi di accessibilità

Il basso contrasto del neumorfismo tra elemento e sfondo spesso non supera i requisiti WCAG 2.1 AA (minimo 3:1 per componenti UI). Soluzioni: aumentare l'opacità delle ombre, usare un bordo per gli stati di focus, o riservare il neumorfismo solo agli elementi decorativi.

Quando usare il neumorfismo

Il neumorfismo funziona meglio per dashboard, orologi, player audio e chioschi dove l'estetica del brand prevale sull'accessibilità. Evitarlo per la navigazione principale e le interfacce con molto testo. Gli approcci ibridi bilanciano interesse visivo e usabilità.

Tool gratuito Generatore Box Shadow Crea ombre box CSS a strati con anteprima live

FAQ

Cos'è il neumorfismo in CSS? +
È uno stile di design che usa due box-shadow — una chiara e una scura — su elementi che condividono il colore dello sfondo, creando un aspetto morbido estruso o premuto.
Come si crea la doppia ombra in CSS? +
Si applica box-shadow con due valori: un'ombra chiara offset in alto-sinistra (x e y negativi) e una scura in basso-destra (x e y positivi), con lo stesso blur di 15–30px.
Quali colori funzionano per il neumorfismo? +
I grigi a tono medio e i pastelli desaturati funzionano meglio. I colori delle ombre devono condividere la stessa tinta dello sfondo, schiarita e scurita del 10–15%.
Differenza tra neumorfismo convesso e concavo? +
Gli elementi convessi appaiono rialzati con ombre verso l'esterno. Quelli concavi appaiono premuti usando la parola chiave CSS `inset` nella box-shadow.
Il neumorfismo supera gli standard WCAG? +
Spesso no. Il basso contrasto tra elemento e sfondo non raggiunge il minimo 3:1 per i componenti UI. Usare bordi o aumentare l'opacità delle ombre.
Posso combinare il neumorfismo con altri stili? +
Sì. Gli approcci ibridi usano contenitori neumorfici con contenuto flat o material design all'interno, bilanciando texture visiva e leggibilità.
Quali strumenti generano CSS neumorfici? +
Il Generatore Neumorfismo di PixCode permette di regolare colore di sfondo, distanza ombre, blur e intensità con anteprima live e output CSS istantaneo.