CSS Neumorphism Generator
Führung
CSS Neumorphism Generator
Erstellen Sie weiche, extrudierte „neumorphe“ UI-Elemente, ohne zwei entgegengesetzte Box-Shadows manuell einzustellen. Wählen Sie eine Basisfarbe, wählen Sie eine Form (flach, konkav, konvex oder eingeprägt), ziehen Sie die Regler für Entfernung, Intensität, Blur und Lichtwinkel, dann kopieren Sie den generierten CSS direkt in Ihr Projekt.
Nutzung
- Wählen Sie eine Hintergrundfarbe. Die gleiche Farbe wird für das Element und den umgebenden Canvas verwendet – das ist der Grund, warum neumorphe Effekte funktionieren.
- Wählen Sie eine Form: Wohnung, Konkav (subtile Abfall), Konvex (subtile Aufblähung), oder Innenbereich eingedrückt).
- Passen Sie Abstand und Lichtwinkel um die Richtung des Schattens zu bestimmen.
- Einstellen Intensität und Blurring bis die Oberfläche richtig wirkt.
- Kopieren Sie den CSS-Code oder schalten Sie HTML + CSS anzeigen für einen kopierbereiten Snippet ein.
Funktionen
- Live-Vorschau — Jeder Änderung der Regler aktualisiert das angezeigte Element sofort.
- Fünf integrierte Vorlagen — Soft Light, Strong Light, Soft Dark, Strong Dark und Pressed.
- Automatisch abgeleitete Schattenfarben — Helle und dunkle Schatten werden mathematisch aus der Basisfarbe abgeleitet, sodass der Effekt immer übereinstimmt.
- Konkave und konvexe Gradienten — Das Tool erzeugt einen entsprechenden linearen Gradient für die Oberfläche des Elements in diesen Modi.
- Innen (eingedrückt) Modus — für Buttons, die beim Klicken „eingedrückt“ erscheinen.
- Lichtwinkelsteuerung — Drehen Sie die virtuelle Lichtquelle von 0° bis 360°.
- Kopierbereiter CSS-Code — sauberer Ausgabe mit der Box-Shadow-Deklaration und der Oberflächenhintergrund.
Häufig gestellte Fragen
-
Was ist Neumorphismus?
Neumorphismus (auch als weicher UI bezeichnet) ist ein visueller Stil, bei dem Elemente wie aus der Hintergrundfläche herausragen oder in die Hintergrundfläche eindringen. Er wird mit zwei Box-Shadows mit gleicher Blur erreicht – einem helleren Schatten auf der Seite, die der Lichtquelle zugewandt ist, und einem dunkleren Schatten auf der gegenüberliegenden Seite – beide gegen einen Hintergrund derselben Farbe wie das Element selbst gerendert.
-
Warum muss das Element die Hintergrundfarbe teilen?
Neumorphismus hängt von der Illusion ab, dass die Form Teil der gleichen Oberfläche wie der Hintergrund ist. Wenn das Element eine andere Farbe verwendet, sieht es nicht mehr wie eine Extrusion, sondern als flache Fläche mit zwei zufälligen Schatten, was den Effekt zerstört.
-
Sind neumorphe Interfaces barrierefrei?
Sie haben bekannte Barrieren. Da alle Elemente die Hintergrundfarbe teilen, ist der Kontrast gegenüber Text und anderen UI-Elementen oft sehr gering, was WCAG-Kontrastanforderungen missachtet und Benutzer mit Bildvergrößerung verwirren kann. Verwenden Sie Neumorphismus für dekorative Oberflächen und behalten Sie kritische interaktive Elemente mit hohem Kontrast.
-
Wie ist der Lichtwinkel mit den Schattenabständen verbunden?
Die beiden Schattenabstände werden aus dem Lichtwinkel mit grundlegenden Trigonometrie berechnet: offsetX = cos(angle) × distance, offsetY = sin(angle) × distance. Der gegensätzliche Schatten wird an den negativen Abständen platziert, sodass die Licht- und Dunkelseite immer an gegenüberliegenden Kanten liegen, was dem echten Lichtquellen entspricht.
Erweiterungen installieren
IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche
恵 Die Anzeigetafel ist eingetroffen!
Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!
Unverzichtbare Tools
Alle Neuheiten
AlleAktualisieren: Unser neuestes Werkzeug was added on Mai 30, 2026
Beteiligen Sie sich
Helfen Sie uns, weiterhin wertvolle kostenlose Tools bereitzustellen
