CSS Schatten Erfassen realistischer Ergebnisse ohne Probier- und Fehlversuche

Ein Schatten ist eine der CSS-Eigenschaften, die zunächst einfach wirkt, bis man ein Ergebnis sieht, das wie ein Clip-Art aus dem Jahr 2008 aussieht. Die Syntax ist kurz, aber was jede Wert tatsächlich macht – und wie sie miteinander interagieren – ist nicht offensichtlich. Hier ist, wie man Schatten schreibt, die sorgfältig gestaltet sind, nicht einfach kopiert.

Die Syntax, entschlüsselt

box-shadow: offset-x offset-y blur-radius spread-radius color;

Fünf Werte. Lassen Sie uns genau auf jeden einzelnen Wert eingehen:

• offset-x: Wie weit der Schatten horizontal verschoben wird. Positive Werte bewegen ihn nach rechts; negative Werte bewegen ihn nach links.
• offset-y: Wie weit der Schatten vertikal verschoben wird. Positive Werte bewegen ihn nach unten.
• blur-radius: Weicht den Schatten ab. Bei 0ist die Kante hart. Höhere Werte verblenden ihn nach außen, indem ein Gauss-Blurring auf die Schattenform angewendet wird.
• spread-radius: Erweitert oder verkleinert die Schattenform bevor blurring. Positive Werte machen die Schattenform größer als das Element; negative Werte machen sie kleiner.
• color: Die Farbe des Schattens. Ein häufiger Fehler ist die Verwendung eines reinen Schwarzen.
• inset: Ein optionales Schlüsselwort, das den Schatten innerhalb des Elements platziert.

Blurring vs. Spread: Die Verwirrung, die Schatten zerstört

Diese beiden Werte sind die Ursache für die meisten „warum sieht das so komisch aus“-Momente.

Blurring macht den Schatten weich. Es simuliert die Ausbreitung des Lichts – je weiter von der Quelle entfernt, desto mehr „bleibt“ der Schatten. Ein blur-radius von 8px auf einem kleinen Element sieht sehr unterschiedlich aus als auf einem großen.

Spread vergrößert oder verkleinert die Grundform des Schattens. Wenn Sie versuchen, den Eindruck eines „fernen“ und weichen Schattens zu erzeugen, bedeutet ein erhöhtes Blurring ohne negativen Spread, dass der Schatten außerhalb der Grenzen des Elements „bleibt“, was ungrounded aussehen kann. Ein leicht negativer Spread zieht ihn zurück, sodass das Blurring von einer natürlichen Grundform ausgeht.

Die richtige Kombination ist normalerweise ein moderater Blurring mit null oder leicht negativem Spread. So funktionieren echte Schatten – sie sind weicher bei größerer Entfernung, aber sie erweitern sich nicht über das Objekt hinaus, das den Schatten wirft.

Schatten, die natürlich aussehen

Drei Regeln für Schatten, die absichtsvoll wirken:

1. Verwenden Sie kein reines Schwarz. Echte Schatten nehmen die Umgebungsfarbe auf. Ein dunkler Navy oder ein dunkler warme Grau bei 0.10–0.15 Transparenz wirkt als Schatten, ohne wie ein gestempelter Form zu wirken. Probieren Sie rgba(0, 0, 0, 0.12) als Ausgangspunkt, dann verschieben Sie die Farbe leicht wärmer oder kälter, um mit Ihrem Farbton zu übereinzustimmen.

2. Wählen Sie eine einzige Lichtquelle. Wenn Schatten auf verschiedenen Elementen in verschiedene Richtungen gehen, wirkt die Seite unkoherent. Wählen Sie eine Richtung – typischerweise positiv offset-y (Licht von oben) – und halten Sie diese über das gesamte System konstant.

3. Halten Sie die Transparenz niedrig. Ein Schatten mit voller Transparenz wirkt wie ein Rand. Wenn Sie einen harten Rand deutlich erkennen, haben Sie entweder zu viel Transparenz oder haben die Blurring-Option auf null gesetzt. Echte Schatten sind subtil – sie verleihen Volumen, nicht eine Kontur.

Schichten mehrerer Schatten für Tiefe

CSS erlaubt kommagetrennte Schattenschichten auf einem einzelnen Element. Hier erhalten Sie echte Tiefe ohne visuelle Artefakte.

Statt einem großen Schatten versuchen Sie zwei: einen engen, nahen Schatten für Kontakt und einen diffusen, entfernten Schatten für die Höhe.

box-shadow:
  0 2px 4px rgba(0, 0, 0, 0.08),
  0 8px 24px rgba(0, 0, 0, 0.06);

Die erste Schicht verankert das Element an der Oberfläche. Die zweite verleiht dem Eindruck, dass es über der Oberfläche schwebt. Keine Schicht ist „der Schatten“ allein – gemeinsam erzeugen sie den Eindruck von Tiefe. Physikalisch simuliert dies, wie ein starker, naher Lichtquellen einen engen Schatten unterhalb erzeugt, während die Umgebungslicht einen weichen Halo weiter entfernt ausfüllt.

Innen-Schatten: Wenn das Licht umgekehrt wird

Der inset Schlüsselwort verlegt den Schatten innerhalb der Elementgrenzen anstatt außerhalb. Die Hauptanwendungen sind:

• Drucktaste-Status: Ein flacher, inländischer Schatten auf :active verleiht das Gefühl einer physischen Abwärtsbewegung, wie bei einem echten Buttonklick.
• Eingabefeld-Tiefe: Formeingaben und Textbereiche fühlen sich von der Oberfläche abgesetzt, mit einem oberen Kanten-Schatten – ein Muster, das auf die skeuomorphe Design-Praxis zurückgeht, aber dennoch klar lesbar ist.

/* Pressed button */
button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Input field depth */
input {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
}

Leistung: Wann filter: drop-shadow verwenden

box-shadow auslöst eine Neuzeichnung auf jede Änderung – nicht nur auf das Element, sondern auch auf die darunter liegende gezeichnete Schicht. Bei Animationen oder UIs mit viel Scrollen führt dies zu messbaren Kosten.

filter: drop-shadow() läuft auf dem GPU-Compositor und ist für animierte Schatten erheblich günstiger. Es folgt auch der tatsächlichen gezeichneten Form des Elements (einschließlich transparenter Bereiche), während box-shadow immer die Box-Modell-Fläche folgt.

Die praktische Regel: Verwenden Sie box-shadow für statische Schatten auf Layout-Elementen. Greifen Sie bei animierten Elementen oder SVGs auf filter: drop-shadow zu, wenn der Schatten auf die visuelle Form des Elements abgestimmt werden muss, nicht auf die Box-Fläche.

Schatten-Tokens für ein Design-System

Die manuelle Eingabe von Schattenwerten pro Komponente führt zu Inkonsistenzen. Definieren Sie eine kleine Menge von Elevation-Tokens einmal, und beziehen Sie sie überall.

:root {
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.04);

  --shadow-md:
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 12px rgba(0, 0, 0, 0.06);

  --shadow-lg:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);

  --shadow-xl:
    0 8px 16px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.06);

  --shadow-2xl:
    0 12px 24px rgba(0, 0, 0, 0.10),
    0 32px 80px rgba(0, 0, 0, 0.08);
}

Jedes Token verwendet die zweischichtige Methode: einen engen Schatten für die Kontaktverankerung und einen diffusen Schatten für die Höhe. Blurring und Transparenz steigen mit zunehmender Höhe – je weiter von der Oberfläche entfernt, desto weicher und ausgedehnter wird der Schatten.

Diese Werte funktionieren gut auf weiß und hellen Grau-Hintergründen. Auf dunklen Hintergründen invertieren Sie die Logik – verwenden Sie heller, halbtransparente Farben für inländische Schatten anstatt dunkle Farben für abgeworfene Schatten.

Vermeiden Sie das Raten

Wenn Sie an Schattenwerten iterieren – besonders bei mehreren Schattenschichten oder bei verschiedenen Transparenzwerten – spart ein Live-Vorschau erhebliche Zeit. Die CSS-Boxschatten-Generator bei IO Tools ermöglicht es Ihnen, alle sechs Parameter in Echtzeit anzupassen, mehrere Schattenschichten zu stapeln und den generierten CSS direkt zu kopieren. Nützlich, um neue Design-Tokens abzustimmen oder sicherzustellen, dass ein Schatten korrekt aussieht, bevor er in die Produktion gelangt.

Der Unterschied zwischen einem Schatten, der gestaltet aussieht, und einem, der einfach kopiert wurde, liegt meistens an drei Dingen: niedriger Transparenz, einer nicht reinen schwarzen Farbe und der Tatsache, dass Blurring die Arbeit erledigt, die Spread nie gemeint hat.

Das könnte Ihnen auch gefallen

Neu

Inhaltssicherheitsrichtlinie: Schreiben einer funktionierenden CSP-Header

Mehr lesen "

Veröffentlicht am 1. Mai 2026

Neu

Vergleich von JSON-Objekten: Wie man Unterschiede in API-Antworten erkennen kann

Mehr lesen "

Veröffentlicht am 30. Apr. 2026

Neu

String-Fallkonvertierung: snake_case, camelCase, und warum es in APIs wichtig ist

Mehr lesen "

Veröffentlicht am 29. Apr. 2026

Neu

HTTP-Cookies: Wie sie richtig erstellt und parsiert werden

Mehr lesen "

Veröffentlicht am 28. Apr. 2026