Neumorfismo CSS Shadow: codice a due livelli
Costruisci visivamente il codice box-shadow CSS: cursori per offset, sfocatura, diffusione, colore con opacità, modalità inserita e fino a quattro livelli con un'anteprima dal vivo.
Risultato
Questa pagina apre il generatore con la classica coppia neumorfica già costruita: uno strato chiaro con offset −8px/−8px in quasi bianco e uno strato scuro con offset 8px/8px in un grigio-blu attenuato, entrambi sfocati a 16px. Passa da un livello all'altro nell'elenco dei livelli per ottimizzare ciascun lato in modo indipendente.
Il neumorfismo (interfaccia utente morbida) è lo stile in rilievo che ha raggiunto il picco intorno al 2020: gli elementi sembrano estrusi dallo sfondo anziché fluttuare sopra di esso. Onestamente, comporta dei veri compromessi: l'effetto funziona solo quando lo sfondo dell'elemento corrisponde allo sfondo della pagina e i bordi a basso contrasto possono compromettere l'accessibilità, quindi la maggior parte dei team ora lo usa come accento, non come un intero linguaggio di progettazione.
Se lo stile si adatta al tuo progetto, questa dichiarazione a due livelli è il punto di partenza canonico: copia il CSS, imposta l'elemento e lo sfondo della pagina sullo stesso grigio tenue e aggiungi un raggio del bordo corrispondente. Tutto viene eseguito localmente nel tuo browser.