CSS-Neumorphismus-Generator

Der CSS Neumorphism Generator baut Soft-UI-Elemente - den Stil, bei dem eine Form sanft aus dem Hintergrund extrudiert oder mithilfe gepaarter heller und dunkler Schatten in den Hintergrund gedrückt aussieht. Sie stellen die Oberflächenfarbe, den Schattenabstand, die Unschärfe, die Kontrastintensität, den Eckradius und die Form ein, schauen Sie sich eine Live-Vorschau an und kopieren Sie den genauen CSS.

Neumorphismus arbeitet, indem zwei Kastenschatten auf einem Element platziert werden, das seinen Hintergrund mit der Seite teilt: einen helleren Schatten oben links und einen dunkleren unten rechts. Die beiden Schattenfarben und Offsets überzeugend weich aussehen zu lassen, ist von Hand pingelig. Dieses Tool leitet die hellen und dunklen Farbtöne automatisch von Ihrer Oberflächenfarbe ab, sodass der Effekt immer ausgeglichen aussieht.

Alles läuft in Ihrem Browser. Wählen Sie eine Voreinstellung, stellen Sie die Schieberegler ein, wechseln Sie zwischen flach, konvex, konvex und gedrückt und kopieren Sie das CSS. Kein Konto, kein Upload und es funktioniert weiterhin offline, sobald die Seite geladen wurde.

Der Neumorphismus lohnt sich mit klaren Augen über seine Hauptschwäche, nämlich die Zugänglichkeit, zu verwenden. Der Stil funktioniert, indem er einen hellen Schatten und einen dunklen Schatten auf einer Oberfläche platziert, die fast die gleiche Farbe wie ihr Hintergrund hat. Der Rand eines Bedienelements wird durch einen Unterschied von einigen Prozent in der Leuchtdichte definiert. Das liest sich für manche Betrachter elegant und für jeden mit verringerter Kontrastempfindlichkeit unsichtbar, auf einem schwachen Bildschirm oder im Freien. Es fällt WCAG 1.4.11 aus, das ein Verhältnis von 3:1 an der Grenze einer interaktiven Komponente verlangt Der übliche Kompromiss besteht darin, den Stil für dekorative Oberflächen beizubehalten und wirklich interaktiven Elementen einen echten Rand oder einen klaren Fokuszustand zu verleihen. Schattenfarben leiten sich hier korrekt von der Oberflächenfarbe ab, sodass eine dunkle Oberfläche ein Paar ergibt.