CSS-Neumorphismus-Generator

Was ist CSS-Neumorphismus-Generator?

Der CSS-Neumorphismus-Generator ist ein kostenloses visuelles Werkzeug, um den Soft-UI-Look (Neumorphismus) zu gestalten, bei dem Elemente mithilfe zweier versetzter Schatten desselben Farbtons aus der Oberfläche herauszuragen oder in sie hineingedrückt zu sein scheinen. Er ist für UI-Designer und Frontend-Entwickler gemacht, die diese subtile, taktile Tiefe wollen, ohne gepaarte box-shadow-Werte von Hand abzustimmen. Lege mit dem Farbwähler oder einem Hex-Feld eine Grundfarbe fest, wechsle die Form zwischen Flach, Konkav und Konvex und passe den Abstand (wie weit die Schatten versetzt sind), die Intensität (die Stärke des Hell-Dunkel-Kontrasts), die Weichzeichnung (Weichheit) und den Radius (Eckenrundung) an. Das Werkzeug leitet aus deiner Grundfarbe ein helleres Glanzlicht und einen dunkleren Schatten ab und kombiniert sie – bei konkaven und konvexen Formen optional mit einem dezenten Verlauf – zu einer einzigen CSS-Regel, die live auf einem passenden Hintergrund angezeigt und als kopierbarer Code ausgegeben wird.

So verwendest du CSS-Neumorphismus-Generator

1. Wähle die Grundfarbe der Oberfläche über das Farbfeld oder durch Eingabe eines Hex-Werts wie #e0e5ec.
2. Wähle eine Form: Flach für ein erhabenes Panel, Konkav für eine eingedrückte Mulde oder Konvex für eine gewölbte Erhebung.
3. Stelle den Abstand ein, um den hellen und dunklen Schatten weiter nach außen zu rücken und eine tiefere Extrusion zu erzielen.
4. Passe die Intensität an, um den Kontrast aus Glanzlicht und Schatten stärker oder dezenter zu machen.
5. Stelle die Weichzeichnung für weichere oder schärfere Kanten und den Radius zum Abrunden der Ecken ein.
6. Prüfe die Live-Vorschau und kopiere dann das erzeugte Neumorphismus-CSS in dein Stylesheet.

Beispiele

Farbe #e0e5ec, Form Flach, Abstand 12, Intensität 15, Weichzeichnung 24, Radius 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

Farbe #e0e5ec, Form Konkav, Abstand 8, Intensität 15, Weichzeichnung 16, Radius 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

Farbe #3a3f47, Form Konvex, Abstand 6, Intensität 20, Weichzeichnung 12, Radius 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

Häufig gestellte Fragen

Was ist Neumorphismus?

Neumorphismus (oder Soft UI) ist ein Stil, bei dem Elemente mithilfe zweier versetzter box-shadow desselben Farbtons – ein hellerer oben links und ein dunklerer unten rechts – aus einer einfarbigen Oberfläche herauszuragen oder in sie hineingedrückt zu sein scheinen. Dieses Werkzeug leitet beide Schatten aus deiner Grundfarbe ab, sodass sie immer zur Oberfläche passen.

Was ist der Unterschied zwischen Flach, Konkav und Konvex?

Flach hält die Oberfläche in einer einzigen Vollfarbe, sodass das Element über dem Hintergrund erhaben wirkt. Konkav fügt einen dezenten Verlauf hinzu, der nach oben links hin abdunkelt und so nach innen ausgehöhlt wirkt. Konvex kehrt den Verlauf um, sodass die Mitte gewölbt und angehoben wirkt. Der helle und der dunkle Schatten bleiben gleich; nur die Oberflächenfüllung ändert sich.

Wie funktionieren Abstand, Intensität, Weichzeichnung und Radius?

Der Abstand ist der Pixelversatz beider Schatten – größere Werte rücken das Element weiter von der Oberfläche weg. Die Intensität steuert, wie viel heller und dunkler die beiden Schattenfarben gegenüber der Grundfarbe sind. Die Weichzeichnung mildert die Schattenkanten und der Radius rundet die Ecken ab. Das CSS aktualisiert sich live, sobald du einen dieser Werte änderst.

Welche Farbe sollte ich für den Hintergrund verwenden?

Neumorphismus wirkt nur dann korrekt, wenn das Element auf einer Oberfläche derselben Grundfarbe sitzt – wende dieselbe Farbe auf das übergeordnete Element oder den Seitenhintergrund an. Die Vorschau nutzt deine Grundfarbe als Hintergrund, damit du den Effekt vor dem Kopieren genau beurteilen kannst.

Werden meine Daten irgendwohin hochgeladen?

Nein. Der Generator läuft vollständig in deinem Browser mit JavaScript – deine Farbe und deine Einstellungen werden niemals an einen Server gesendet, sodass er privat und nach dem Laden der Seite sogar offline funktioniert.