Neumorphismus-Generator (Soft UI) CSS

Neumorphismus-Generator (Soft UI) CSS: wofür es gut ist

Neumorphismus, oder Soft UI, lässt Buttons und Karten wie in den Hintergrund geformt aussehen, mit einem hellen Schatten auf einer Seite und einem dunklen auf der anderen.

Wähle die Farbe, und der Generator berechnet daraus die zwei Schatten, mit Größe, Ecken, Abstand, Unschärfe, Intensität und Richtung des Lichts. Es gibt vier Formen: flach, konkav und konvex (mit sanftem Verlauf) und gedrückt (innere Schatten). Die Seite erklärt die Vorsicht beim Kontrast, der Schwachstelle dieses Stils.

So geht’s

1. Wähle die Hintergrundfarbe.
2. Passe Abstand, Unschärfe, Intensität und Licht an.
3. Wähle die Form und kopiere das CSS.

Wann nutzen

• Buttons und Karten in Dashboards.
• Bedienelemente von Playern oder Apps.
• Dekorative Details auf Landingpages.

Häufige Fragen

Wie funktioniert Neumorphismus?

Das Element hat dieselbe Farbe wie der Hintergrund und zwei Schatten: einen helleren auf der Seite, von der das Licht kommt, und einen dunkleren auf der Gegenseite. Das erzeugt den Eindruck von Relief, als wäre das Element in den Hintergrund geformt.

Ist Neumorphismus barrierefrei?

Mit Vorsicht. Weil das Element dieselbe Farbe wie der Hintergrund hat, hat sein Rand wenig Kontrast und kann für Menschen mit schwacher Sehkraft verschwinden. Nutze es für dekorative Details und Karten, sichere Kontrast bei Text und Icons und verlasse dich nicht nur auf das Relief, um zu zeigen, dass etwas ein Button ist.

Funktioniert es auf dunklem Hintergrund?

Es funktioniert, aber der Effekt ist subtiler. Bei sehr dunklen oder sehr hellen Farben ist der Schatten der Extremseite kaum zu sehen; mittlere Töne geben das sichtbarste Ergebnis.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools