Come scelgo il colore di sfondo giusto?

Il Neumorphism si basa sul colore dell'elemento che corrisponde esattamente al colore di sfondo. Le ombre morbide creano quindi l'illusione di profondità utilizzando tonalità leggermente più chiare e più scure di quel codice esadecimale di base.

Qual è la differenza tra Outset e Inset?

Outset fa apparire l'elemento come se emergesse dallo sfondo come un pulsante fisico. Inset inverte la logica delle ombre per far sembrare l'elemento come se fosse premuto nella superficie.

Il design neumorfico è accessibile?

Può essere difficile per gli utenti con disabilità visive perché si basa su ombre a basso contrasto piuttosto che su bordi chiari. Si consiglia di utilizzare testo o icone ad alto contrasto all'interno dei contenitori neumorfici per mantenere l'usabilità.

Questo generatore supporta la modalità scura?

Sì. Cambia il selettore del colore di sfondo in una tonalità scura e lo strumento ricalcolerà automaticamente le ombre chiare e scure corrispondenti per un effetto tattile in modalità scura.

Colore e design

Generatore Neumorphism

Soft inset / outset shadows for tactile UI.

Runs in your browser

Size200pxRadius50pxDistance20pxBlur60pxIntensity15ShapeBackground

CSS

.neu {
  width: 200px;
  height: 200px;
  border-radius: 50px;
  background: #e0e5ec;
  box-shadow: 20px 20px 60px rgb(149, 154, 161), -20px -20px 60px rgb(255, 255, 255);
}

Nota dell'editore

Understanding · Soft UI, with one fundamental problem.

Questo capitolo approfondito è attualmente disponibile solo in inglese. Lo strumento di conversione qui sopra funziona nella tua lingua; il lungo articolo esplicativo non è stato ancora tradotto.

Domande frequenti

Quick answers.

›How do I choose the right background colour?

Neumorphism relies on the element colour matching the background colour exactly. The soft shadows then create the illusion of depth using slightly lighter and darker shades of that base hex code.

›What is the difference between Outset and Inset?

Outset makes the element appear to pop out of the background like a physical button. Inset reverses the shadow logic to make the element look like it is pressed into the surface.

›Is neumorphic design accessible?

It can be difficult for users with visual impairments because it relies on low-contrast shadows rather than clear borders. We recommend using high-contrast text or icons inside your neumorphic containers to maintain usability.

›Does this generator support dark mode?

Yes. Change the background colour picker to a dark shade and the tool will automatically recalculate the corresponding light and dark shadows for a dark-mode tactile effect.

Le persone cercano anche

Strumenti correlati

More in this room.

Vedi tutto in Colore e design