Neumorphismus (oder Soft UI) ist ein massiver Trend im Webdesign. Es entsteht ein wunderschöner, extrudierter Kunststoff-Look, der sich sehr hochwertig und modern anfühlt.
Allerdings bereitet das völlige Programmieren neumorphischer Schaltflächen enorme Kopfschmerzen.
Die Mathematik hinter den Schatten
Ein perfekter Neumorphic-Button erfordert zwei perfekt ausgewogene Boxschatten: 1. Ein heller Schatten oben links, um eine Lichtquelle zu simulieren. 2. Ein dunkler Schatten unten rechts, um Tiefe zu simulieren.
Ist der Kontrast zu hoch, sieht es hart aus. Ist er zu niedrig, verschwindet die Schaltfläche im Hintergrund.
„css / Die klassische Neumorphismus-Formel / Hintergrund: #e0e5ec; Kastenschatten: 9px 9px 16px rgb(163.177.198,0,6), -9px -9px 16px rgba(255.255.255, 0,5); „
Der schnellere Weg
Anstatt stundenlang CSS-Werte in DevTools zu optimieren, können Sie unseren [CSS Button Generator](/en/css-button-generator) verwenden.
Mit unserem Tool können Sie visuell genau den Randradius, die Farbe und die Schattenintensität einstellen, die Sie möchten. Sobald es auf dem Bildschirm perfekt aussieht, klicken Sie einfach auf „CSS kopieren“ und legen es in Ihrer React-Komponente oder Ihrem Stylesheet ab.
Hören Sie auf, rohe CSS-Schatten zu schreiben, und beginnen Sie, sie visuell zu generieren!