Come creare un effetto Neumorphism (Soft UI) in CSS
Pubblicato il 15 settembre 2026 · 2 min di lettura
Il neumorphism — l’aspetto morbido e apparentemente estruso "soft UI" — si basa su due ombre che si compensano, una più chiara e una più scura del colore base, posizionate su angoli opposti. Questo strumento calcola automaticamente i colori d’ombra corretti dal tuo colore base e ti permette di visualizzare in anteprima stati rilevati o premuti.
Prova Generatore NeumorphismPassaggi
- 1
Apri il Generatore Neumorphism
Vai al generatore di neumorphism.
- 2
Scegli un colore base
Scegli il colore di sfondo dell’elemento — colori chiari e tenui funzionano meglio per questo effetto.
- 3
Imposta distanza, sfocatura e intensità
Regola quanto lontano si trovano le ombre dall’elemento e quanto pronunciato è il contrasto chiaro/scuro.
- 4
Scegli rilevato o premuto
Scegli se l’elemento dovrebbe apparire come se sporgesse o fosse premuto verso l’interno.
Domande frequenti
Lo strumento schiarisce e scurisce il colore base scelto in base alla quantità di intensità che imposti, generando automaticamente un’ombra chiara e scura corrispondenti invece di richiederti di sceglierle separatamente.
Rilevato usa normali ombre esterne per un elemento che appare come se sporgesse dalla superficie; premuto usa ombre inset per l’aspetto opposto, incassato.
Funziona meglio con colori da chiari a medi, abbastanza desaturati, poiché l’effetto si basa su sottili differenze di luminosità che sono più difficili da vedere contro sfondi molto scuri o altamente saturati.
Poiché il calcolo dell’ombra avviene automaticamente, ottieni ombre neumorfiche correttamente bilanciate senza scegliere manualmente due colori separati per tentativi ed errori.