DE

CSS Box-Shadow-Generator

Der CSS-Box-Shadow-Generator: Wählen Sie eine Vorlage oder stellen Sie Versatz, Unschärfe, Ausdehnung, Farbe und Deckkraft mit den Reglern ein. Mehrere Schatten lassen sich übereinanderlegen, jeder auch als Innenschatten (inset). Die Vorschau zeigt das Ergebnis sofort, der fertige CSS-Code lässt sich mit einem Klick kopieren. Eigenen CSS-Code können Sie unten einfügen und weiterbearbeiten.

Quelle: css-backgrounds-3, § 6.1, W3C – CSS Backgrounds and Borders Module Level 3: the box-shadow property. Stand: .

Schatten einstellen

Vorlagen

box-shadow:
  0 10px 25px -5px rgba(0, 0, 0, 0.25),
  0 8px 10px -6px rgba(0, 0, 0, 0.1);
Ein Schatten pro Zeile, durch Komma getrennt – z. B. 0 4px 12px rgba(0, 0, 0, 0.12)
Meine ToolboxIhre Eingaben werden nur in diesem Browser gespeichert.

Ergebnis

CSS-Deklaration
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
Schatten im Überblick (der erste liegt oben)
Nr.Versatz X (px)Versatz Y (px)Unschärfe (px)Ausdehnung (px)FarbeArt
10 px10 px25 px-5 pxrgba(0, 0, 0, 0.25)außen
20 px8 px10 px-6 pxrgba(0, 0, 0, 0.1)außen
So weit ragt der Schatten über die Box hinaus (ca.)
oben 10 px · rechts 20 px · unten 30 px · links 20 px

So wird gerechnet

So ist box-shadow aufgebaut

Ein Schatten besteht nach der W3C-Spezifikation (CSS Backgrounds and Borders Level 3) aus zwei bis vier Längen, einer optionalen Farbe und dem optionalen Schlüsselwort inset:

CSS-Schatten erstellen – so geht's

  1. Eine Vorlage wählen oder Versatz, Unschärfe (blur), Ausdehnung (spread), Farbe und Deckkraft mit den Reglern einstellen.
  2. Bei Bedarf weitere Schatten hinzufügen und einzelne als Innenschatten (inset) markieren.
  3. Die CSS-Deklaration kopieren – oder eigenen box-shadow-Code einfügen und weiterbearbeiten.
WertBedeutung
1. LängeVersatz nach rechts (negativ: nach links)
2. LängeVersatz nach unten (negativ: nach oben)
3. LängeUnschärfe (blur), nicht negativ; fehlt sie, ist sie 0
4. LängeAusdehnung (spread): vergrößert den Schatten, negativ verkleinert ihn
Farbefehlt sie, gilt die Textfarbe (currentColor)
insetSchatten fällt nach innen statt nach außen

Mehrere Schatten trennen Sie mit Kommas. Der erste Schatten liegt oben, die folgenden dahinter. Schatten verändern das Layout nicht und erzeugen keine Scrollleisten – ein Elternelement mit overflow: hidden schneidet sie aber ab.

Wie weit reicht die Unschärfe?

Die Spezifikation verlangt eine Unschärfe, die einem Gaußschen Weichzeichner mit einer Standardabweichung von der Hälfte des Blur-Werts entspricht. Der Übergang ist damit rund doppelt so breit wie der Blur-Wert und liegt mittig auf der Schattenkante – nach außen reicht er also etwa um den Blur-Wert.

Beispiel 0 10px 25px -5px: Die Kante liegt 25 − 5 = 20 px außerhalb der Box, verschoben um 10 px nach unten. Der Schatten ragt damit oben etwa 20 − 10 = 10 px, seitlich 20 px und unten 20 + 10 = 30 px hinaus. Diese Werte zeigt der Generator unter „So weit ragt der Schatten …“ – praktisch als Innenabstand, damit nichts abgeschnitten wird.

Typische Einsätze

Passend dazu: runde Ecken mit dem CSS Border-Radius-Generator, Farbverläufe mit dem CSS-Verlauf-Generator und lesbare Farben mit dem Kontrast-Checker.

Häufige Fragen

Was ist der Unterschied zwischen blur und spread?

Blur (3. Wert) macht die Kante weich, ohne die Grundfläche des Schattens zu verändern. Spread (4. Wert) vergrößert oder verkleinert die Schattenfläche selbst, bevor sie weichgezeichnet wird. Mit Blur 0 und positivem Spread entsteht ein harter Rahmen.

Wie lege ich mehrere Schatten übereinander?

Trennen Sie die Schatten mit Kommas, z. B. 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24). Der erste Schatten wird zuoberst gezeichnet. Im Generator legen Sie weitere Schatten mit „+ Schatten“ an.

Warum wird mein Schatten abgeschnitten?

Schatten zählen nicht zur Größe des Elements. Hat ein Elternelement overflow: hidden oder overflow: auto, schneidet es alles ab, was hinausragt. Geben Sie dem Elternelement so viel Innenabstand, wie der Generator als Ausdehnung anzeigt.

Funktioniert box-shadow in allen Browsern?

Ja. box-shadow einschließlich mehrerer Schatten, inset und rgba()-Farben wird von allen aktuellen Browsern ohne Präfix unterstützt. Der Generator gibt transparente Farben als rgba() aus, das auch ältere Browser verstehen.

Wie mache ich einen Schatten nur unten?

Mit negativer Ausdehnung, die die Unschärfe ausgleicht, z. B. box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3). Oben und seitlich ragt der Schatten dann nicht über die Box hinaus, unten um 8 px.

Quellen und Rechtsgrundlagen

Stand: · So prüfen wir

Passende Werkzeuge