UI-Design mit Schatten und Tiefe – moderne Layer-Effekte planen

Schatten-Effekte sind längst mehr als ein optischer Spielerei. Richtig eingesetzt strukturieren sie Oberflächen, lenken Aufmerksamkeit und schaffen eine klare Hierarchie im Interface. Gleichzeitig wirken übertriebene Schatten schnell altmodisch oder unruhig.

Dieser Artikel zeigt, wie Tiefenwirkung im UI bewusst geplant wird – von den Grundlagen der visuellen Hierarchie über Layer-Systeme bis zur sauberen Umsetzung in Figma, Sketch oder anderen Tools.

UI-Tiefenwirkung verstehen: Warum Schatten mehr als Deko sind

Bevor in Grafik-Programmen an Reglern gedreht wird, hilft ein kurzer Blick auf die Rolle von Tiefe im Interface.

Visuelle Hierarchie mit Ebenen und Schatten aufbauen

Der wichtigste Job von Schatten: Sie machen sichtbar, welche Elemente „oben“ liegen und damit wichtiger oder interaktiv sind. Ein Button mit leichter Erhöhung wirkt klickbar, eine Card hebt sich vom Hintergrund ab, ein Dialog schiebt sich klar vor den Rest der Seite.

Ein einfaches Denkmodell für Hierarchie:

• Level 0: Hintergrund / Canvas – z. B. Seite oder App-Hintergrund.
• Level 1: Content-Fläche – z. B. Haupt-Card, Container, Panels.
• Level 2: Interaktive Elemente – Buttons, Inputs, Hover-Zustände.
• Level 3: Overlays – Dialoge, Modals, Dropdowns, Toasts.

Jedes Level sollte spürbar unterschiedliche Tiefe haben. So können Nutzer auf einen Blick erkennen, wo sie sich gerade konzentrieren sollen.

Neumorph, Flat, Material: Designstile sinnvoll einordnen

Viele Teams schwanken zwischen „fast flach“ und extrem plastisch. Hilfreich ist eine bewusste Entscheidung für einen Stil:

• Flat UI mit minimalen Schatten: wirkt ruhig und modern, braucht aber klare Kontraste und Typografie, damit nichts „verschmilzt“. Dazu passt ein strukturierter Einsatz von Weißraum, wie im Beitrag UX-Design mit White Space beschrieben.
• Material-inspirierte Tiefe: wenige, definierte Höhenstufen mit weichen Schatten. Gut steuerbar, sehr praxisnah.
• Neumorphes Design (weiche Lichtkanten statt klarer Schatten): optisch spannend, aber oft problematisch für Barrierefreiheit und Klarheit.

Unabhängig vom Stil gilt: Tiefe braucht System – nicht für jede Box einen eigenen Schatten erfinden.

Shadow-System im Designsystem anlegen

Wer jedes Mal neu entscheidet, bekommt ein unruhiges Interface. Ein klares Schatten-System ist genauso wichtig wie ein Farb- oder Typografie-System.

Sinnvolle Ebenen für Schatten-Hierarchie definieren

Ein praxistauglicher Start sind 4–5 feste Tiefenstufen im Designsystem, etwa:

Jede Stufe bekommt definierte Werte (Offset, Blur, Spread, Transparenz). So bleibt die Hierarchie konsistent – auch, wenn mehrere Designer:innen am Projekt arbeiten.

Design-Token für Schatten-Effekte definieren

Wie bei Farben lohnt es sich, Schatten nicht nur optisch, sondern auch technisch zu denken. Ein gängiger Ansatz ist, ihnen Namen (Tokens) zu geben, die im Code wiederverwendet werden.

• z. B. shadow-sm, shadow-md, shadow-lg, shadow-xl
• oder: elevation-1, elevation-2, elevation-3

Diese Tokens können in Tools wie Figma benannt und später als CSS-Variablen genutzt werden. Die Brücke zwischen Design und Code ist ein typisches Thema bei Design Tokens im Webdesign. Genau das verhindert, dass Frontend-Teams „ähnliche“ Schatten frei erfinden.

Moderne UI-Schatten in Figma, Sketch & Co. gestalten

Die meisten Grafik- und UI-Tools bieten ähnliche Parameter für Schatten an. Entscheidend ist, wie sie gestaltet werden – nicht, welches Programm genutzt wird.

Parameter für natürliche Schattenwirkung steuern

Drei Stellschrauben bestimmen, ob ein Schatten modern und ruhig wirkt:

• Blur (Weichheit): Größerer Blur erzeugt weichere, natürlichere Schatten. Kleine, harte Schatten erinnern an alte Desktop-UIs.
• Y-Offset: Je größer der Versatz nach unten, desto höher wirkt das Element. Kleine Offsets reichen oft für Cards; größere für Modals.
• Opacity: Transparente Schatten fügen sich in helle wie dunkle Hintergründe ein. Werte im niedrigen Bereich vermeiden „Schmutzflecken“.

Eine gute Basis ist ein eher großer Blur und eine niedrige Opacity. Dann kann die Höhe über Offsets fein gesteuert werden.

Layer-Komposition: Drop Shadow, Inner Shadow, Hintergrund

Moderne Interfaces kombinieren oft mehrere Shadow-Typen:

• Drop Shadow: erzeugt die eigentliche Tiefe unter dem Element.
• Inner Shadow: kann Kanten subtil abdunkeln und Flächen plastischer machen, ohne laut zu wirken.
• Background-Layer: dezente Verläufe oder leicht andere Töne im Hintergrund verstärken die Wirkung des Schattens.

Wichtig ist, diese Kombination im System zu definieren – nicht pro Element neu. Eine Card-Komponente kann beispielsweise einen festen „Shadow 0“ plus inneren Schatten nutzen, ein Modal „Shadow 3“ plus dunklen Overlay-Hintergrund.

Hover- und Active-States mit Schatten inszenieren

Statt große Farbwechsel einzusetzen, können Interaktionszustände über veränderte Tiefe spürbar gemacht werden:

• Hover-State: leicht stärkerer Schatten und etwas größerer Y-Offset (Element „kommt entgegen“).
• Active-State: etwas reduzierter Schatten, optional leicht nach unten verschoben (Element „wird gedrückt“).

In Prototyping-Tools lassen sich diese Zustände als Varianten hinterlegen. In Figma etwa helfen dazu Komponenten-Varianten und Auto Layout, wie im Beitrag Figma Auto Layout: Responsive Komponenten erklärt wird.

Schatten im Dark Mode und bei Barrierefreiheit planen

Was in hellen Oberflächen gut funktioniert, kippt im Dunkeln schnell. Dark UIs stellen andere Anforderungen an Schatten als helle Hintergründe.

Kontrast und Lesbarkeit bei dunklen Oberflächen sichern

In dunklen Interfaces wirken schwarze Schatten oft kaum sichtbar. Hier helfen alternative Ansätze:

• Helle Kanten (Light-Shadow): sehr dezente, helle Linien am oberen Rand können Tiefe erzeugen.
• Weiche, leicht farbige Schatten: z. B. dunkles Blau statt Rein-Schwarz, damit Schatten nicht „dreckig“ wirken.
• Leichte Glows: Statt reiner Schatten können sehr weiche Licht-Höfe hinter besonders wichtigen Elementen stehen.

Parallel sollten Kontraste von Text und Flächen stimmen. Viele Prinzipien dazu deckt der Beitrag Dark Mode im Webdesign ab.

Schatten-Effekte und Barrierefreiheit

Für Nutzer:innen mit Sehbeeinträchtigungen sind reine Schatten oft schwer wahrnehmbar. Daher gilt:

• Nie nur Tiefe nutzen, um Klickbarkeit zu zeigen – immer in Kombination mit Farbe, Konturen oder Text.
• Kritische Klickflächen klar vom Hintergrund abheben, auch ohne Schatten (z. B. Outline, Füllfarbe).
• Fokus-States sichtbar auch ohne Licht-/Schatten-Effekt planen.

Schatten sind ein zusätzliches Signal – kein Ersatz für Kontrast und klare Struktur.

Häufige Fehler bei UI-Schatten und wie sie vermieden werden

Viele Interfaces wirken „unfertig“, weil Schatten uneinheitlich oder zu stark ausfallen. Ein paar typische Stolperfallen lassen sich leicht beheben.

Uneinheitliche Schattenstile im Projekt

Ein häufiger Fehler: Einige Komponenten haben starke, harte Schatten, andere beinahe keine. Das löst sich mit einem klar dokumentierten System.

• Schatten-Werte im Designsystem oder in der Komponenten-Bibliothek festhalten.
• Review-Runde einplanen, in der gezielt nur Tiefe und Hierarchie geprüft werden.
• In regelmäßigen Abständen UI-Screens vergleichen: Haben Buttons, Cards, Modals konsistente Wirkung?

Strukturierte Design-Reviews lassen sich gut mit bestehenden Feedback-Prozessen kombinieren, wie sie etwa in Design-Feedback im Webprojekt strukturieren beschrieben sind.

Übertriebene Schatten: Wenn das UI „schmutzig“ wirkt

Starke, breite Schatten mit hoher Deckkraft lassen Flächen schnell flimmern. Um das zu vermeiden, helfen einfache Regeln:

• Opacity niedrig halten und lieber mit Blur arbeiten.
• Nur sehr wenige Farben für Schatten nutzen, idealerweise neutrale Töne.
• Keine „Spezial-Schatten“ nur für einzelne Seiten oder Kampagnen ausdenken.

Wer unsicher ist, reduziert den Schatten so lange, bis er gerade eben noch wahrnehmbar ist – und verstärkt ihn dann minimal.

Praxis-Check: So wird ein Schatten-System im Projekt eingeführt

Statt das komplette UI umzukrempeln, kann ein Schatten-System schrittweise eingeführt werden. Die folgende kompakte Checkliste hilft bei der Umsetzung.

Checkliste: Von chaotischen Schatten zu klarer Tiefe

• Bestehende Screens sammeln und Screenshots von typischen Seiten (Start, Listen, Detail, Formulare) anlegen.
• Alle sichtbaren Schatten markieren und grob in 3–5 Kategorien einordnen (z. B. Cards, Buttons, Modals, Overlays).
• Für jede Kategorie eine Ziel-Tiefenstufe definieren (Shadow 0–3) und konkrete Werte in den Design-Tools anlegen.
• Komponenten im UI-Tool aktualisieren, damit alle Instanzen von den neuen Schatten profitieren.
• Mit dem Frontend-Team Shadow-Tokens vereinbaren und in CSS/Design-Token-Struktur aufnehmen.
• Ein kurzes Dokument oder ein Abschnitt im Designsystem ergänzen, der Schatten-Hierarchie und Beispiele zeigt.

Mini-Fallbeispiel: Kartenlayout mit neuer Tiefenlogik überarbeiten

Ein typisches Szenario: Eine Produktliste mit Karten, Hover-States und einem Filter-Panel wirkt unruhig. Unterschiedliche Schatten, keine klare Hierarchie. So kann die Überarbeitung aussehen:

• Schritt 1: Hintergrund der Seite vereinheitlichen und Cards mit einem leichten „Shadow 0“ versehen.
• Schritt 2: Hover-State der Cards nur mit leicht verstärkter Tiefe und minimaler Verschiebung nach oben gestalten.
• Schritt 3: Filter-Panel als höheren Layer planen (z. B. Shadow 1 oder 2), damit es sich deutlich abhebt.
• Schritt 4: Modale Filter-Dialoge mit maximaler Tiefe (Shadow 3) und abgedunkeltem Overlay hinterlegen.

Das Ergebnis: Klare Ebenen, ruhigere Optik, bessere Orientierung – bei gleichzeitig sehr zurückhaltenden Effekten.