Zum Inhalt springen
arnaud.app

Neumorphismus-Generator (CSS Soft-UI-Schatten)

Kostenloser Neumorphismus-Generator mit Live-Vorschau. Soft-UI-Schatten aus zwei gegensätzlichen box-shadow-Ebenen bauen, Tiefe und Farbe regeln - CSS kopieren.

Läuft in deinem Browser

Neumorphismus (Soft UI) lässt eine Form aus dem Hintergrund herausgedrückt - oder eingedrückt - wirken, mit zwei gegensätzlichen Schatten: einem dunklen unten rechts und einem hellen oben links. Dieser Generator lädt dieses Paar, damit du Offset, Weichzeichnen und Intensität einstellst, auf getönter Fläche vorschaust und das CSS kopierst. Wirkt am besten auf leicht getöntem oder farbigem Hintergrund, nicht auf reinem Weiss.

box-shadow: 8px 8px 16px 0px rgba(0,0,0,0.10), -8px -8px 16px 0px rgba(255,255,255,0.85);

So funktioniert's

  1. Voreinstellung wählen

    Material-Elevation 1-16, Neumorphismus, Fokus-Ring, langer Schatten, Schein - ein Klick lädt die Ebenen.

  2. Ebenen anpassen

    X-/Y-Offset, Weichzeichnen, Streuung als Slider + Hex-Picker mit separater Deckkraft. Zahlen aktualisieren beim Ziehen.

  3. Umsortieren oder stummschalten

    Pfeiltasten ändern die Zeichenreihenfolge (erste = oben). Das Auge-Symbol schaltet eine Ebene stumm, ohne Werte zu verlieren.

  4. Auf beiden Flächen prüfen

    Heller/dunkler Hintergrund und Form abgerundet/Pille/Kreis - Schattendesign hängt vom Hintergrund ab.

  5. CSS kopieren

    Die vollständige `box-shadow:`-Deklaration steht bereit zum Einfügen in dein Stylesheet.

Was ist das?

Ein CSS-Box-Shadow-Generator baut die `box-shadow:`-Deklaration aus einer Liste von Schattenebenen. Vollständige Syntax pro Ebene: `[inset?] <x-offset> <y-offset> <weichzeichnen> <streuung> <farbe>`, mehrere Ebenen mit Komma getrennt. Browser zeichnen sie von vorne nach hinten in Deklarationsreihenfolge - die erste Ebene liegt oben. Negative Offsets schieben den Schatten nach oben/links, positive nach unten/rechts (Bildschirm-Koordinatenkonvention).

Wann verwenden

Karten-Elevations-Systeme (Material, iOS, eigene Design-Systeme), Fokus-Ringe für Barrierefreiheit, neumorphe Formen, hervorgehobene Eingabefelder, Drop-Shadows auf Icons in Karten, Hover-/Press-Feedback, Popovers und Tooltips, Modals. Überall wo man früher zu Photoshop griff, schafft CSS box-shadow es nativ, animiert sauber und respektiert Transparenz.

Häufige Fehler

Vollständig opake Schatten - wirken wie grobe Konturen. Streuung grösser als Weichzeichnen - harter Ring statt weicher Verlauf. Vergessen, dass Inset-Schatten in der Padding-Box gezeichnet werden, nicht über dem Rahmen. Werte wählen, die auf Weiss perfekt sitzen, im Dark Mode aber brechen (die dunkle Vorschau hier verhindert das). Und box-shadow auf inline-Element ohne Display-Änderung anwenden - nichts passiert.

FAQ

Warum mehrere Schattenebenen?
Echte Schatten sind nie ein einzelner weicher Klecks. Das Material-Elevation-System stapelt 2-3 Schatten: einen engen, dunklen, wenig gestreuten nahe der Kante plus einen breiteren, helleren weiter aussen. Die erste Ebene wird oben gezeichnet, die letzte unten - mit den Pfeiltasten umordnen.
Was macht inset?
Ein Inset-Schatten wird innerhalb der Padding-Box des Elements gezeichnet statt aussen. So entstehen gedrückte Buttons, eingelassene Eingabefelder oder Inner-Shadow-Effekte. Inset-Schatten liegen über dem Hintergrund, aber unter dem Inhalt, und drücken den Rahmen nicht hinaus.
Wie baue ich einen neumorphen Schatten?
Neumorphismus nutzt zwei gegensätzliche Schatten auf einer leicht getönten Fläche: einen dunklen unten rechts (`8px 8px 16px rgba(0,0,0,0.10)`) und ein helles Highlight oben links (`-8px -8px 16px rgba(255,255,255,0.85)`). Die Neumorphismus-Voreinstellung lädt diesen Stapel zum Anpassen. Der Effekt braucht eine leicht graue oder gefärbte Fläche - auf reinem Weiss verschwindet das Highlight.
Warum erscheint mein box-shadow nicht?
Drei übliche Verdächtige. (1) Ein Elternelement hat `overflow: hidden` und schneidet den Schatten ab. (2) Das Element ist inline - box-shadow braucht block, inline-block oder Flex-Item zum Rendern. (3) Das Element hat keinen Hintergrund, also bleibt ein Inset-Schatten unsichtbar, weil nichts zum Bemalen da ist.
Unterschied zwischen Weichzeichnen und Streuung?
Weichzeichnen weicht die Schattenkante auf - mehr Weichzeichnen = breiterer Verlauf. Streuung vergrössert oder verkleinert den Schatten vor dem Weichzeichnen - positive Werte machen ihn grösser als das Element, negative kleiner (nützlich für Schatten, die das Element 'anheben', indem sie schmaler bleiben).
box-shadow oder filter: drop-shadow?
`box-shadow` für rechteckige Boxen - günstiger zu rendern und unterstützt Multi-Layer + Inset. `filter: drop-shadow()` für nicht-rechteckige Formen wie PNGs mit Transparenz oder SVG-Icons, weil es dem Alphakanal statt der Bounding-Box folgt. Sie sind nicht austauschbar, wenn die Form kein Rechteck ist.
Wie viele Schattenebenen sind zu viel?
Ab 4-5 Ebenen wächst die sichtbare Tiefe nicht mehr und die Komposit-Kosten steigen. Materials Elevation deckelt aus diesem Grund bei 3 Ebenen pro Stufe. Wer mehr stapelt, kämpft wahrscheinlich gegen sich selbst - lieber die Streuung einer Ebene verdoppeln.
Kann ich nach Tailwind oder filter: drop-shadow exportieren?
Ja - schalte den Ausgabe-Umschalter um. Der Tailwind-Modus gibt einen Arbitrary Value `shadow-[…]` mit 8-stelligen Hex-Farben aus, damit mehrere Ebenen das Komma überstehen. Der drop-shadow-Modus gibt eine `filter: drop-shadow()`-Kette für nicht-rechteckige Formen aus; er ignoriert Streuung und Inset, die `box-shadow` unterstützt.

CSS-Box-Shadow-Generator

Mehrere CSS-Schatten mit Voreinstellungen, Live-Vorschau und kopierfertiger Deklaration stapeln.

Ausprobieren →

Mehr in dieser Kategorie