Generatore di neumorfismo (Soft UI)
Il neumorfismo fa sembrare gli elementi emergere dallo sfondo con due ombre opposte, una chiara e una scura. Regola ogni parametro, scegli da dove arriva la luce e copia il CSS.
Elaborato al 100% nel tuo browser
Ctrl + Enter eseguiCtrl + C copia risultato
Come si usa
- 1Scegli il colore base: sfondo ed elemento condividono lo stesso colore.
- 2Regola dimensione, raggio, distanza, intensità e sfocatura delle ombre.
- 3Seleziona la forma (piatta, concava, convessa o premuta) e la direzione della luce.
- 4Copia il CSS o condividi un link al tuo design.
Casi d’uso
- Pulsanti, interruttori e controlli dall’aspetto tattile.
- Card e pannelli per dashboard minimaliste.
- Interfacce per domotica, lettori musicali o calcolatrici.
- Esplorare tendenze di design per mockup e Dribbble.
Domande frequenti
Cos’è il neumorfismo?
Uno stile di design (neumorphism o soft UI) in cui gli elementi sembrano modellati nello stesso materiale dello sfondo. Usa due box-shadow opposte: una più chiara verso la luce e una più scura sul lato opposto.
Che differenza c’è tra piatta, concava, convessa e premuta?
La piatta usa un colore pieno; concava e convessa aggiungono un gradiente che simula una superficie incurvata verso l’interno o l’esterno; premuta usa ombre inset perché l’elemento sembri schiacciato.
Il neumorfismo è accessibile?
Il basso contrasto può rendere difficile vedere i bordi di pulsanti e campi. Abbinalo a icone chiare, testo con contrasto sufficiente e stati di focus visibili.
Funziona su sfondi scuri?
Sì, ma riduci l’intensità: con colori molto scuri l’ombra chiara prende il sopravvento. Rende al meglio con grigi medi e colori pastello.