Generatore di neumorfismo CSS

Il generatore di neumorfismo CSS costruisce elementi soft-UI - lo stile in cui una forma appare delicatamente estrusa o premuta sullo sfondo utilizzando ombre chiare e scure accoppiate Impostare il colore della superficie, la distanza dell'ombra, la sfocatura, l'intensità del contrasto, il raggio d'angolo e la forma, guardare un'anteprima dal vivo e copiare il CSS esatto.

Il neumorfismo funziona posizionando due ombre a scatola su un elemento che condivide il suo sfondo con la pagina: un'ombra più chiara in alto a sinistra e una più scura in basso a destra. Ottenere i due colori e offset delle ombre per sembrare convincentemente morbidi è schizzinoso a mano. Questo strumento deriva automaticamente le tonalità chiare e scure dal colore della tua superficie, quindi l'effetto sembra sempre equilibrato.

Tutto funziona nel tuo browser. Scegli un preset, regola i cursori, passa tra forme piatte, concave, convesse e premute e copia il CSS. Nessun account, nessun caricamento e continua a funzionare offline una volta caricata la pagina.

Vale la pena utilizzare il neumorfismo con occhi chiari riguardo alla sua principale debolezza, ovvero l'accessibilità. Lo stile funziona posizionando un'ombra chiara e un'ombra scura su una superficie quasi dello stesso colore del suo sfondo, quindi il bordo di un controllo è definito da una differenza di pochi punti percentuali in luminanza. Ciò risulta elegante per alcuni spettatori e invisibile a chiunque abbia una sensibilità al contrasto ridotta, su uno schermo fioco o all'aperto. Non riesce WCAG 1.4.11, che chiede un rapporto 3:1 sul confine di un componente interattivo. Il compromesso abituale è mantenere lo stile per le superfici decorative e dare agli elementi genuinamente interattivi un bordo reale o uno stato di messa a fuoco chiaro. I colori dell'ombra derivano dal colore della superficie qui, quindi una superficie scura produce una coppia correttamente invertita anziché grigia.