Generatore CSS Neumorphism
Crea splendidi effetti soft-UI / neumorphism con anteprima live. Controlla dimensione, raggio, distanza, sfocatura, intensità e sorgente luminosa - poi copia codice CSS, React o Tailwind pronto per la produzione.
Anteprima Live
Come Creare Effetti Neumorphism
Scegli un Colore Base
Scegli un colore chiaro di mezza tonalità - tipicamente un grigio morbido, beige o pastello. Le ombre vengono calcolate automaticamente da esso.
Scegli Forma e Tipo
Seleziona il tipo di elemento (pulsante, card, input…) e lo stile della forma: Piatta, Premuta, Concava o Convessa. Regola distanza e sfocatura.
Copia e Usa
Copia il CSS, lo snippet HTML, il componente React o le classi arbitrarie di Tailwind. Inseriscili nel tuo progetto e il gioco è fatto.
Riferimento CSS Neumorphism
Piatta (rialzata)
box-shadow: 6px 6px 12px #darkShadow, -6px -6px 12px #lightShadow;L'aspetto rialzato predefinito - ombra scura opposta alla sorgente luminosa, ombra chiara dal lato della sorgente. L'elemento sembra poggiare sulla superficie.
Premuta (inset)
box-shadow: inset 6px 6px 12px #dark, inset -6px -6px 12px #light;Aggiungere inset fa sì che le ombre vadano all'interno dell'elemento, creando un aspetto incavato e premuto. Perfetto per gli stati attivi/selezionati.
Concava
background: linear-gradient(145deg, #darkerBase, #lighterBase);Stessa box-shadow della forma piatta, ma sullo sfondo viene applicato un gradiente diagonale da scuro a chiaro per simulare una curvatura superficiale concava.
Convessa
background: linear-gradient(145deg, #lighterBase, #darkerBase);La direzione del gradiente opposta alla concava - da chiaro a scuro - dà l'illusione di una superficie convessa, come una cupola che sporge verso l'esterno.
Domande Frequenti
Cos'è il neumorphism?
Il neumorphism (nuovo + skeumorfismo) è una tendenza del design UI che utilizza ombre e luci sottili per far sembrare che gli elementi sporgano o premano sullo sfondo. Crea un aspetto morbido e tattile simile alla plastica, reso popolare intorno al 2020 su Dribbble.
Perché l'elemento e lo sfondo devono avere lo stesso colore?
Il neumorphism funziona creando l'illusione che l'elemento faccia parte del materiale dello sfondo. Se differiscono, l'illusione dell'ombra si rompe. Usa sempre colori corrispondenti per elemento e sfondo della pagina.
Come vengono calcolati i colori delle ombre?
L'ombra scura è una versione scurita del colore base (riducendo la luminosità HSL del fattore di intensità). L'ombra chiara è una versione schiarita. La modalità automatica le calcola entrambe dal colore base automaticamente.
Il neumorphism è accessibile?
I design neumorphic hanno spesso un contrasto molto basso, che non soddisfa le linee guida WCAG. Controlla sempre il rapporto di contrasto mostrato nello strumento e assicurati che gli elementi interattivi abbiano stati di focus ed etichette adeguati. Preferisci il neumorphism per la decorazione piuttosto che per i controlli UI primari.
Posso usarlo con Tailwind CSS?
Tailwind supporta valori arbitrari: shadow-[6px_6px_12px_#c5cad5,-6px_-6px_12px_#ffffff]. La scheda Tailwind genera la stringa di classe completa. Potrebbe essere necessario aggiungere il colore di sfondo come proprietà CSS personalizzata.
Qual è la differenza tra Piatta e Premuta?
Piatta usa box-shadow normale - l'elemento appare rialzato. Premuta aggiunge la parola chiave inset così le ombre vanno all'interno - l'elemento sembra premuto nella superficie. Usa Premuta per gli stati attivi/selezionati.