Neumorphismus-Generator
Gestalte weiche, plastische neumorphe UI-Oberflächen mit doppelten Schatten und kopiere das CSS.
—
Der Hintergrund der Arbeitsfläche entspricht der Elementfarbe – genau das erzeugt den weichen, plastischen neumorphen Look.
Standardmäßig werden helle und dunkle Schatten aus der Grundfarbe abgeleitet. Aktiviere die Option, um sie selbst festzulegen.
Über Neumorphismus-Generator
Der Neumorphismus-Generator gestaltet den weichen, herausgedrückten „Soft-UI“-Look: ein Element, das aus der dahinterliegenden Fläche herausgedrückt — oder in sie hineingedrückt — erscheint. Wählen Sie eine Grundfarbe, und das Tool leitet alles Weitere ab, denn der Effekt funktioniert nur, wenn Element und Hintergrund dieselbe Farbe teilen und die Tiefe allein aus zwei gegenüberliegenden Box-Shadows entsteht.
Schieberegler steuern die Geometrie: Größe, Eckenradius, Schattenabstand, deren Intensität und Unschärfe. Vier Formmodi — flach, konkav, konvex und gedrückt — tauschen den internen Verlauf und die Schattenrichtung, und eine Lichtquellenauswahl bewegt das Highlight in jede der vier Ecken, damit das Element zur Beleuchtung Ihres Designs passt.
Standardmäßig werden die hellen und dunklen Schattenfarben aus der Grundfarbe berechnet, aber ein manueller Modus lässt Sie beide selbst festlegen. Das generierte CSS — Hintergrund, Radius und die beiden Box-Shadows — ist nur einen Klick entfernt.
So verwenden Sie Neumorphismus-Generator
- Wählen Sie die Grundfarbe — sie wird sowohl auf das Element als auch auf die Fläche dahinter angewendet.
- Wählen Sie eine Form: flach, konkav, konvex oder gedrückt.
- Legen Sie die Lichtquellenecke fest, um zu steuern, wo das Highlight fällt.
- Feinjustieren Sie Größe, Eckenradius, Abstand, Intensität und Unschärfe mit den Schiebereglern.
- Aktivieren Sie manuelle Schattenfarben, wenn Sie die abgeleiteten hellen und dunklen Töne überschreiben möchten.
- Kopieren Sie das CSS und fügen Sie es in Ihr Element ein.