Generatore di neumorfismo (soft UI) CSS
Scegli il colore di sfondo: l’elemento usa lo stesso colore e le ombre sono calcolate a partire da esso. Prova le quattro forme.
Come si usaPulsanti e card che emergono dallo sfondo
Disponibile in: 
Generatore di neumorfismo (soft UI) CSS: a cosa serve
Il neumorfismo, o soft UI, fa sembrare pulsanti e card modellati nello sfondo stesso, con un’ombra chiara da un lato e una scura dall’altro.
Scegli il colore e il generatore calcola le due ombre a partire da esso, con dimensione, angoli, distanza, sfocatura, intensità e direzione della luce. Ci sono quattro forme: piatto, concavo e convesso (con una sfumatura sottile) e premuto (ombre interne). La pagina spiega l’attenzione da porre al contrasto, il punto debole di questo stile.
Come si usa
- Scegli il colore di sfondo.
- Regola distanza, sfocatura, intensità e luce.
- Scegli la forma e copia il CSS.
Quando usarlo
- Pulsanti e card nei pannelli.
- Controlli di un player o di un’app.
- Dettagli decorativi nelle landing page.
Domande frequenti
Come funziona il neumorfismo?
L’elemento ha lo stesso colore dello sfondo e due ombre: una più chiara dal lato da cui arriva la luce e una più scura dal lato opposto. Questo dà l’impressione di rilievo, come se l’elemento fosse modellato nello sfondo stesso.
Il neumorfismo è accessibile?
Con attenzione. Poiché l’elemento ha lo stesso colore dello sfondo, il suo bordo ha poco contrasto e può sparire per chi ha una vista debole. Usalo per dettagli decorativi e card, garantisci il contrasto su testo e icone e non affidarti solo al rilievo per indicare che qualcosa è un pulsante.
Funziona su sfondo scuro?
Funziona, ma l’effetto è più sottile. Con colori molto scuri o molto chiari l’ombra sul lato estremo quasi non si vede; i toni medi danno il risultato più visibile.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.