Generatore di Neumorphism
Progetta superfici UI neumorfiche morbide ed estruse con doppia ombra e copia il CSS.
—
Lo sfondo della tela corrisponde al colore dell'elemento — è questo che rende possibile l'aspetto neumorfico morbido ed estruso.
Per impostazione predefinita le ombre chiare e scure derivano dal colore di base. Abilita per impostarle manualmente.
Informazioni su Generatore di Neumorphism
Il Generatore di Neumorphism progetta l'aspetto morbido ed estruso del "soft UI": un elemento che sembra premuto fuori da — o dentro — la superficie sottostante. Scegli un colore base e lo strumento deriva tutto il resto, perché l'effetto funziona solo quando l'elemento e il suo sfondo condividono lo stesso colore e la profondità nasce interamente da due box-shadow opposti.
Gli slider controllano la geometria: dimensione, border radius, la distanza delle ombre, la loro intensità e la sfocatura. Quattro modalità di forma — flat, concave, convex e pressed — cambiano il gradiente interno e la direzione dell'ombra, e un selettore della sorgente luminosa sposta il riflesso su uno qualsiasi dei quattro angoli in modo che l'elemento corrisponda all'illuminazione del tuo design.
Per impostazione predefinita i colori dell'ombra chiara e scura sono calcolati dal colore base, ma una modalità manuale ti permette di impostarli entrambi tu stesso. Il CSS generato — background, radius e il doppio box-shadow — è a un clic di distanza.
Come usare Generatore di Neumorphism
- Scegli il colore base — viene applicato sia all'elemento sia allo sfondo dietro di esso.
- Scegli una forma: flat, concave, convex o pressed.
- Imposta l'angolo della sorgente luminosa per controllare dove cade il riflesso.
- Regola dimensione, border radius, distanza, intensità e sfocatura con gli slider.
- Attiva i colori manuali dell'ombra se vuoi sovrascrivere le tonalità chiare e scure derivate.
- Copia il CSS e incollalo sul tuo elemento.