UI-Schatten: Warum der Standard-Schlagschatten mit 25 % Schwarz falsch aussieht und welche geschichteten Schatten du stattdessen nutzen solltest

Der Schatten, zu dem die meisten Designer greifen, ist Schwarz mit 25 %. Bei dieser Stärke sieht er nicht nach Licht aus. Er sieht aus wie ein Fleck unter der Karte.

Ein guter Schatten ist fast unsichtbar: Du spürst den Auftrieb, bevor du den Schatten siehst. So kommst du dahin, mit vier Tokens zum Kopieren.

Warum der Standard wie ein Fleck aussieht

Figmas Standard-Schlagschatten ist Schwarz mit 25 % Deckkraft, 4 nach unten versetzt. Zwei gängige Tutorials wiederholen ihn, also verbreitet er sich: Ein Tool-Default wird zu einer Designentscheidung, die niemand getroffen hat.

Ein echter Schatten ist weich. Licht umfließt ein Objekt, deshalb läuft der Rand eines Schattens allmählich aus, und der Schatten wird schwächer, je weiter er vom Objekt entfernt ist. Eine einzelne harte, dunkle Ebene hat nichts davon. Sie hat eine Kante und eine Stärke, und das Auge liest sie als Dreck, als grauen Fleck, nicht als abgehobene Fläche.

Fix 1: 8 Prozent, nicht 25

Schwarz mit 25 %

Schwarz mit 8 %, weiterer Blur

Gleiche Karte, gleicher Untergrund. Links ist der Schatten das lauteste Element der Karte. Rechts ist er ein weicher Auftrieb, und du schaust auf den Inhalt. Die Deckkraft zu senken ist die halbe Lösung. Den Blur wachsen zu lassen ist die andere Hälfte.

Wenn der Blur wächst, verteilt sich dieselbe Menge Schatten auf eine größere Fläche und wird von allein heller. Darum wirkt ein weiter Schatten mit 8 Prozent natürlicher als ein enger mit 8 Prozent. Starte bei 8 Prozent und erhöhe nur, wenn die Karte auf deinem Hintergrund verschwindet.

Fix 2: zwei Schatten schichten

Ein Schatten muss zwei Aufgaben erledigen und macht keine davon gut. Zwei Schatten teilen sie sich.

Der enge sitzt direkt unter der Kante und sagt: „Das berührt die Fläche.“ Der weite ist der weiche Halo, der sagt: „Das schwebt darüber.“ Zusammen sehen sie aus wie ein natürlicher Schatten, denn genau das tut echtes Licht: eine dunkle Kontaktlinie plus ein breiter, schwacher Auslauf.

In CSS sind die zwei Ebenen eine Deklaration, durch ein Komma getrennt:

Fix 3: tönen, nicht vergrauen

Reines Schwarz

Mit der Ink-Farbe getönt

Reines Schwarz, in einen farbigen Hintergrund gemischt, macht ihn grau und trüb. Ein Schatten in einem dunklen Ton der Hintergrundfarbe selbst bleibt sauber. Beide Schatten hier haben 16 Prozent, der einzige Unterschied ist also die Farbe.

Die Regel: Nimm deine Ink, die dunkelste Farbe deiner Palette, als Schattenfarbe, mit geringer Deckkraft. In unseren eigenen Tokens ist die Ink #1B1530, ein sehr dunkles Violett. Auf einer weißen Seite ist der Farbstich kaum zu sehen. Auf einer farbigen Seite, einem Brand-Panel oder einem getönten Abschnitt, ist er der Unterschied zwischen einem Schatten, der dazugehört, und einem, der aufgeklebt wirkt.

Fix 4: höher heißt größer

Wenn etwas höher sitzt, ein Menü über einer Karte, ein Modal über einer Seite, wird sein Schatten größer und weicher, weil das Licht mehr Platz zum Ausbreiten hat. Er wird nicht dunkler. Wer den Schatten des höheren Elements dunkler macht, landet wieder beim Fleck.

Das ergibt ein kleines, geschlossenes Set an Tokens:

Jede Ebene nutzt X 0 und Spread 0, gefärbt mit der Ink #1B1530. Figmas Felder X, Y, Blur und Spread entsprechen direkt den vier Zahlen im CSS-box-shadow.

Die Tokens als CSS

Diese vier sind unsere Empfehlung, kein Plattformwert. Tausche die Ink-Farbe gegen deinen eigenen dunkelsten Markenton und behalte die Struktur.

Wo Schatten aufhören zu funktionieren: Dark Mode

Schatten auf Dunkel

Hellere Fläche

Ein Schatten verdunkelt, was dahinter liegt, und ein dunkler Hintergrund hat kaum noch etwas zum Verdunkeln. Links ist der große Schatten unsichtbar und die Karte verschmilzt mit der Seite. Rechts ist die Karte einfach eine hellere Fläche, und genau das hebt sie ab.

Hebe also in einem dunklen Theme eine Ebene ab, indem du sie heller machst, nicht indem du sie beschattest. Unser Paper zu Farbsystemen für den Dark Mode behandelt die Flächenstufen, und Hintergrundfarbe im Light Mode die Grautöne auf der anderen Seite.

Der Blinzeltest

Blinzle auf den Bildschirm oder tritt einen Schritt zurück. Wenn du jeden Schatten noch als dunkle Form erkennst, ist er zu stark. Wenn die Kartenkanten auf deinem schlechtesten Monitor verschwinden, erhöhe die Deckkraft um eine Stufe. Der richtige Schatten verschwindet, wenn du ihn direkt ansiehst, und fällt auf, wenn du ihn wegnimmst.

FAQ

Was ist der beste Schlagschatten für UI?

Zwei geschichtete Ebenen in einem dunklen Farbton deiner eigenen Ink: eine enge wie 0 1px 2px bei 6 Prozent und eine weite wie 0 8px 24px bei 8 Prozent. Das liest sich als natürliches Licht statt als Fleck.

Welche Deckkraft sollte ein UI-Schatten haben?

Unsere vier Tokens reichen von 6 bis 12 Prozent. Starte bei 8 Prozent für eine Karte und erhöhe nur, wenn die Kante verschwindet. Schwarz mit 25 Prozent, ein gängiger Default, passt auf einer sauberen Oberfläche selten.

Was ist Figmas Standard-Schlagschatten?

Schwarz (#000000) mit 25 Prozent Deckkraft und einem Versatz von 4 nach unten. Er ist ein Ausgangspunkt des Tools, keine Designentscheidung, daher werden die meisten Designs besser, wenn man ihn ändert.

Sollten Schatten reines Schwarz sein?

Nein. Nimm eine sehr dunkle Version deiner Marken- oder Ink-Farbe. Auf einem farbigen Hintergrund macht reines Schwarz den Schatten grau und trüb, während ein getönter Schatten die Farbe sauber hält.

Wie zeige ich Elevation mit Schatten?

Mach den Schatten des höheren Elements größer und weicher, nicht dunkler. Nutze ein kleines Set an Tokens wie XS, SM, MD und LG, sodass jede Ebene der Oberfläche einen von vier Schatten verwendet.

Funktionieren Schatten im Dark Mode?

Schlecht. Es bleibt wenig heller Hintergrund zum Verdunkeln, also verschwinden große Schatten. Hebe eine Ebene stattdessen ab, indem du ihr eine hellere Flächenfarbe gibst.

Wie schreibe ich einen geschichteten box-shadow in CSS?

Liste die Ebenen in einer box-shadow-Deklaration auf, durch Kommas getrennt: box-shadow: 0 1px 2px rgba(27,21,48,.06), 0 8px 24px rgba(27,21,48,.08);.

Quellen

• Figmas Standard-Schlagschatten ist #000000 mit 25 % Deckkraft, X 0, Y 4. Tutorials sind sich beim Schwarz mit 25 % einig; beim Standard-Blur widersprechen sie sich, deshalb nennt dieses Paper ihn nie.
• #00000040 ist #000000 mit 25 % im 8-stelligen Hex (0x40 ist 64 von 255, etwa 25 %).
• Die vier Tokens und die Ink #1B1530 (Violett 900) sind unsere UX-Brainy-Effektstile. Sie sind eine Empfehlung, kein Plattformwert.
• Die Karten oben sind unsere eigenen Beispiele. Die Tint-Demo nutzt #4E2FB3 mit 16 Prozent neben Schwarz mit 16 Prozent.
• Mehr Ein-Regel-Posts wie dieser auf UX Brainy.