Neumorphismus-Generator (Soft UI)
Erzeugt aus einer Grundfarbe mit doppeltem Schatten erhabenes, vertieftes oder flaches Soft-UI-CSS und kopiert es
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Aus einer einzigen Grundfarbe berechnet das Tool zugleich einen hellen und einen dunklen Schatten und erzeugt so den weich eingedrückt wirkenden Soft-UI-Stil (Neumorphismus). Sie stellen Größe, Rundung, Schattenabstand, Weichzeichnung und Kontraststärke ein, wählen zwischen erhaben, vertieft und flach und kopieren das CSS samt Live-Vorschau.
Anleitung
- Wählen Sie eine Grundfarbe, dann werden heller und dunkler Doppelschatten automatisch berechnet.
- Wählen Sie per Tab die gewünschte Oberflächenform aus flach, erhaben oder vertieft.
- Verfeinern Sie die Optik mit den Reglern für Größe, Rundung, Schattenabstand, Weichzeichnung und Kontraststärke.
- Kopieren Sie das fertige CSS mit border-radius, background und box-shadow und verwenden Sie es.
FAQ
- Ich habe es angewandt, sehe aber keinen Schatten.
- Neumorphismus wirkt nur natürlich, wenn Element und „Hintergrundfarbe des übergeordneten Elements gleich" sind. Legt man eine hellgraue Karte auf weißen Grund, geht der helle Schatten unter. Stellen Sie auch den Hintergrund des Elterncontainers auf die Grundfarbe ein.
- Worin unterscheiden sich erhaben, vertieft und flach?
- Flach hat eine einfarbige Oberfläche und wirkt nach außen abgehoben, erhaben erhält einen Verlauf von hell nach dunkel und wirkt aufgewölbt, vertieft kehrt den Verlauf um und wirkt nach innen eingedrückt. Die Schattenrichtung ist bei allen drei gleich.
- Können die Schattenfarben von echten Design-Tools abweichen?
- Helle und dunkle Farben sind Näherungswerte, die durch Mischen der Grundfarbe mit Weiß bzw. Schwarz entstehen, und können je nach Tool leicht abweichen – daher nur zur Orientierung. Passen Sie die RGB-Werte bei Bedarf nach dem Kopieren fein an. Alle Berechnungen erfolgen im Browser.