Generatore Neumorfismo Soft UI
Crea effetti CSS neumorfismo soft UI con doppia ombra personalizzabile e 4 tipi di forma.
① Scegli colore e forma ② Regola distanza e blur ombra ③ Copia il CSS
Soft UI
Preset colore:
light#ffffff
dark#b0bdcf
150px
16px
10px
20px
15%
Codice CSS
.neumorphic {
background: #e0e5ec;
border-radius: 16px;
box-shadow: 10px 10px 20px #b0bdcf, -10px -10px 20px #ffffff;
/* light: #ffffff | dark: #b0bdcf */
}Cos'è il Neumorfismo?
Il neumorfismo (Soft UI) è un trend UI che crea superfici plastiche estruse combinando design piatto e skeuomorfismo. Usa due box-shadow duali — una chiara (highlight) e una scura (shadow) — con offset opposti. Il colore dell'elemento corrisponde allo sfondo. CSS chiave: box-shadow: 10px 10px 20px #darkColor, -10px -10px 20px #lightColor. Per la variante premuta usa la parola chiave inset. Per forme concave e convesse aggiunge un background radial-gradient. Le ombre sono derivate dal colore base regolando la luminosità HSL di ±15–25%.
Domande Frequenti
Il neumorfismo combina design piatto e skeuomorfismo. Gli elementi sembrano estrusi dallo sfondo usando doppi box-shadow — un highlight chiaro in alto a sinistra e un'ombra scura in basso a destra.
Si usano due box-shadow con offset opposti: uno più chiaro dello sfondo e uno più scuro. Esempio: box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff.
Piatto: ombre esterne. Concavo: gradiente radiale incavato. Convesso: gradiente radiale rialzato. Premuto: ombre interne con inset.
Le mezze tinte funzionano meglio. Colori intorno a #e0e5ec o #2d3436 sono punti di partenza popolari.
Ha problemi di accessibilità noti: basso contrasto. Il requisito WCAG 2.1 di 3:1 è spesso non soddisfatto.
Funziona meglio per widget dashboard, card, controlli lettore musicale. Meno adatto per contenuto ricco di testo.
Calcola la luminosità HSL, poi crea versione più chiara (+15-25%) e più scura (-15-25%). Questo strumento calcola automaticamente.