Generatore di neumorfismo CSS

Cos'è Generatore di neumorfismo CSS?

Il generatore di neumorfismo CSS è uno strumento visivo gratuito per realizzare l'aspetto soft-UI (neumorfismo), in cui gli elementi sembrano sporgere dalla superficie o esservi premuti dentro mediante due ombre sfalsate della stessa tonalità. È pensato per designer di interfacce e sviluppatori front-end che desiderano quella profondità sottile e tattile senza regolare a mano coppie di box-shadow. Imposta un colore base con il selettore o un campo esadecimale, cambia la Forma tra Piatta, Concava e Convessa e regola la Distanza (di quanto si sfalsano le ombre), l'Intensità (la forza del contrasto chiaro/scuro), la Sfocatura (morbidezza) e il Raggio (arrotondamento degli angoli). Lo strumento ricava dal tuo colore base una luce più chiara e un'ombra più scura e le combina – sovrapponendo facoltativamente una sfumatura sottile per le forme concava e convessa – in un'unica regola CSS, mostrata dal vivo su uno sfondo coordinato e prodotta come codice copiabile.

Come usare Generatore di neumorfismo CSS

1. Scegli il colore base della superficie con il campione o digitando un valore esadecimale come #e0e5ec.
2. Seleziona una Forma: Piatta per un pannello rialzato, Concava per un incavo premuto o Convessa per una sporgenza a cupola.
3. Imposta la Distanza per spostare più all'esterno le ombre chiara e scura e ottenere un'estrusione più profonda.
4. Regola l'Intensità per rendere il contrasto luce/ombra più marcato o più sottile.
5. Regola la Sfocatura per bordi più morbidi o nitidi e il Raggio per arrotondare gli angoli.
6. Controlla l'anteprima dal vivo, poi copia il CSS di neumorfismo generato nel tuo foglio di stile.

Esempi

colore #e0e5ec, forma Piatta, distanza 12, intensità 15, sfocatura 24, raggio 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

colore #e0e5ec, forma Concava, distanza 8, intensità 15, sfocatura 16, raggio 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

colore #3a3f47, forma Convessa, distanza 6, intensità 20, sfocatura 12, raggio 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

Domande frequenti

Che cos'è il neumorfismo?

Il neumorfismo (o soft UI) è uno stile in cui gli elementi sembrano sporgere da una superficie a tinta unita o esservi premuti dentro, usando due box-shadow sfalsate della stessa tonalità: una più chiara in alto a sinistra e una più scura in basso a destra. Questo strumento ricava entrambe le ombre dal tuo colore base, così da abbinarsi sempre alla superficie.

Qual è la differenza tra Piatta, Concava e Convessa?

Piatta mantiene la superficie di un unico colore pieno, così l'elemento appare rialzato sopra lo sfondo. Concava aggiunge una sfumatura sottile che scurisce verso l'alto a sinistra, facendolo sembrare scavato verso l'interno. Convessa inverte la sfumatura in modo che il centro appaia a cupola e sollevato. Le ombre chiara e scura restano invariate; cambia solo il riempimento della superficie.

Come funzionano Distanza, Intensità, Sfocatura e Raggio?

La Distanza è lo sfalsamento in pixel di entrambe le ombre: valori maggiori allontanano l'elemento dalla superficie. L'Intensità controlla quanto i due colori d'ombra siano più chiari e più scuri rispetto al colore base. La Sfocatura ammorbidisce i bordi dell'ombra e il Raggio arrotonda gli angoli. Il CSS si aggiorna dal vivo quando modifichi uno qualsiasi di essi.

Quale colore dovrei usare per lo sfondo?

Il neumorfismo si vede correttamente solo quando l'elemento poggia su una superficie dello stesso colore base: applica lo stesso colore all'elemento padre o allo sfondo della pagina. L'anteprima usa il tuo colore base come sfondo, così puoi valutare l'effetto con precisione prima di copiare.

I miei dati vengono caricati da qualche parte?

No. Il generatore funziona interamente nel tuo browser con JavaScript: il tuo colore e le tue impostazioni non vengono mai inviati a un server, quindi funziona in modo privato e persino offline una volta caricata la pagina.