CSS-Neumorphismus-Generator
Stellen Sie Hintergrundfarbe, Abstand, Weichzeichnung und Intensität ein, um einen Neumorphismus-Effekt (weiche Schatten, die Relief nachahmen) zu gestalten, und erhalten Sie den passenden CSS-Code samt Live-Vorschau. Die Berechnung erfolgt vollständig in Ihrem Browser.
So funktioniert es
Neumorphismus erzeugt die Illusion, dass ein Element leicht erhaben oder in seinen Hintergrund eingedrückt ist – mithilfe zweier gegensätzlicher Schatten in der Farbfamilie des Hintergrunds: ein hellerer nach links oben, ein dunklerer nach rechts unten. Dieses Tool berechnet beide Farbtöne aus der gewählten Hintergrundfarbe und setzt die passende box-shadow-Eigenschaft live zusammen.
Warum müssen beide Schatten dieselbe Grundfarbe haben?
Der Neumorphismus-Effekt beruht auf Helligkeitsunterschieden ein und derselben Farbe (des Hintergrunds) und nicht auf kontrastierenden Farben wie bei einem klassischen Schatten. Genau diese Nähe der Farbtöne erzeugt den weichen, „geformten“ Eindruck, der den Stil auszeichnet, statt eines herkömmlichen Schlagschattens.
Bei welchen Elementen setze ich diesen Effekt ein?
Neumorphismus eignet sich gut für Schaltflächen, Karten, Formularfelder oder Icons auf einem einfarbigen hellen oder dunklen Hintergrund. Auf Hintergründen mit Bild oder Verlauf ist er dagegen schwer lesbar und wirft wegen mangelnden Kontrasts mitunter Barrierefreiheitsprobleme auf – testen Sie ihn daher, bevor Sie ihn in größerem Umfang einsetzen.
Es werden keine Daten an einen Server gesendet: Der Schatten wird vollständig in Ihrem Browser zusammengesetzt.