CSS Box-Shadow-Generator

Passen Sie Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft per Schieberegler an und erzeugen Sie einen CSS box-shadow mit Live-Vorschau. Kopieren Sie den generierten Code mit einem Klick.

Zuletzt aktualisiert: 2026-09-20

Was box-shadow bewirkt

Die CSS-Eigenschaft `box-shadow` wirft einen Schatten von einem Element. Ihr Wert nennt in dieser Reihenfolge den waagerechten Versatz, den senkrechten Versatz, den Weichzeichnungsradius, den Ausdehnungsradius und die Farbe. Doch **vier Zahlen hintereinander, samt einem Unterschied zwischen Weichzeichnung und Ausdehnung, den Worte kaum vermitteln**, machen sie zu einer mühsam von Hand zu schreibenden Eigenschaft. Dieses Werkzeug lässt Sie jeden Wert am Schieberegler bewegen und das Ergebnis sofort sehen.

Den Charakter eines Schattens bestimmt eher die Kombination als die Größe der Werte. **Schatten, die natürlich wirken, halten den Versatz klein, die Weichzeichnung groß und die Deckkraft niedrig**; rückt man den Versatz heraus und erhöht die Deckkraft, entsteht etwas Hartkantiges, wie ausgeschnitten und aufgeklebt. Mit `inset` fällt der Schatten stattdessen nach innen und erzeugt einen eingelassenen Eindruck. Der erzeugte Code lässt sich mit einem Klick kopieren, und alles läuft in Ihrem Browser.

So bauen Sie einen Schatten

Legen Sie die Versätze fest Damit bestimmen Sie die scheinbare Richtung des Lichts. X auf null und Y leicht positiv wirkt meist natürlich.
Stellen Sie den Weichzeichnungsradius ein Er bestimmt, wie weich die Schattenkante ist. Größere Werte verteilen ihn breiter und blasser.
Stellen Sie den Ausdehnungsradius ein Er macht den Schatten selbst dicker oder dünner. **Anders als die Weichzeichnung ändert er die Härte der Kante nicht.**
Wählen Sie Farbe und Deckkraft Halbdurchsichtiges Schwarz ist die sichere Wahl, doch ein dunkler, dem Hintergrund naher Ton wirkt zurückhaltend aufgetragen stimmiger.
Kopieren Sie den Code Fügen Sie den erzeugten `box-shadow`-Wert unmittelbar in Ihr Stylesheet ein.

Tipps für die Nutzung

Statt die Schieberegler zu ziehen, können Sie auch exakte Zahlenwerte direkt in die Felder eingeben, wenn Sie präzise Werte benötigen.
Aktivieren Sie "inset", um den Schatten innerhalb des Elements zu zeichnen – das ergibt einen eingedrückten statt eines erhabenen Effekts.
Ein größerer Spread-Wert vergrößert den gesamten Schattenumriss, während ein größerer Blur-Wert die Kanten weicher und diffuser macht – kombinieren Sie beide für unterschiedliche Texturen.
Eine geringere Deckkraft lässt den Schatten leichter und natürlicher wirken, was hilfreich ist, wenn sich Elemente über farbigen Hintergründen überlappen.
Das generierte CSS kann direkt in Ihr Stylesheet eingefügt werden – besonders wirkungsvoll in Kombination mit Hover-Effekten bei Buttons und Karten.

Wofür sich das eignet

Karten und Schaltflächen Tiefe geben

Schon ein zarter Schatten macht weit deutlicher, dass ein Element anklickbar ist.

Dialoge und Ausklappmenüs anheben

Die Stärke des Schattens drückt aus, wie weit die Fläche über dem dahinterliegenden Inhalt schwebt.

Den Schatten eines Entwurfs nachbauen

Beim Übertragen der Schatteneinstellungen aus einem Entwurfswerkzeug in CSS lassen sich die Werte im Vergleich angleichen.

Einen eingelassenen Eindruck erzeugen

Mit `inset` können Sie ausprobieren, ein Eingabefeld wie in die Seite eingesenkt wirken zu lassen.

Begriffe zu box-shadow

Versatz: Wie weit der Schatten verschoben wird. Der erste Wert gilt waagerecht, der zweite senkrecht; positive Werte verschieben nach rechts und unten.
Weichzeichnungsradius: Wie stark die Schattenkante weichgezeichnet wird. **Bei null erhalten Sie einen Schatten mit scharfem Umriss.**
Ausdehnungsradius: Wie stark der Schatten vergrößert wird. Ein negativer Wert verkleinert ihn.
inset: Das Schlüsselwort, das den Schatten ins Element hinein wirft und einen vertieften Eindruck erzeugt.
Deckkraft: Die Dichte des Schattens, angegeben als Alphawert in `rgba()`. **Ein zu dichter Schatten wirkt schwer.**
Mehrere Schatten: Durch Kommas getrennt lassen sich mehrere Schatten übereinanderlegen. Ein enger dunkler über einem weiten blassen wirkt überzeugend natürlich.

Häufig gestellte Fragen

Der Unschärferadius (blur) bestimmt, wie weich die Kante des Schattens wirkt – ein größerer Wert verteilt den Verlauf über eine breitere Fläche. Der Ausbreitungsradius (spread) verändert dagegen die Größe der Schattenform selbst: positive Werte vergrößern ihn gegenüber dem Element, negative Werte verkleinern ihn. Die Kombination beider erlaubt eine feine Kontrolle über die Textur des Schattens.

Das Schlüsselwort inset zeichnet den Schatten innerhalb des Elementrands statt außerhalb. Während ein normaler box-shadow ein Element über der Seite schweben lässt, lässt inset es eingedrückt oder vertieft wirken – häufig verwendet, um den Rand von Eingabefeldern zu gestalten.

Die CSS-Eigenschaft box-shadow akzeptiert eine durch Kommas getrennte Liste von Schatten, wodurch mehrere für einen dreidimensionaleren Look übereinandergelegt werden können. Dieses Tool konzentriert sich der Einfachheit halber auf die Erzeugung eines einzelnen Schattens; falls mehrere Ebenen benötigt werden, können Sie dem generierten CSS manuell durch Kommas getrennte Werte hinzufügen.

box-shadow ist eine Standard-CSS-Eigenschaft, die von allen modernen Browsern unterstützt wird, einschließlich Internet Explorer 9 und neuer. Herstellerpräfixe wie -webkit- und -moz- waren früher erforderlich, heute funktioniert die Eigenschaft überall ohne Präfix.

Ein vollständig undurchsichtiger schwarzer Schatten (0 % Transparenz) kann je nach Hintergrundfarbe unnatürlich oder zu kräftig wirken. Eine geringere Deckkraft mit halbtransparentem Schwarz oder Grau erzeugt einen weicheren Schatten, der sich auf jedem Hintergrund natürlich einfügt.

Übrigens – wie box-shadow die Ausdruckskraft von Webdesign veränderte

Bevor box-shadow in CSS3 standardisiert wurde, bedeutete das Erzeugen eines Schlagschattens im Web meist, ihn vorab in einem Bildbearbeitungsprogramm in ein Hintergrundbild einzurendern, oder ihn durch das Stapeln mehrerer div-Elemente mit Verlaufshintergründen zu imitieren. Schon eine kleine Änderung an Form oder Weichheit des Schattens erforderte ein neues Bild, was die Design-Iteration langsam und teuer machte.

Als Browser um 2009 begannen, box-shadow als Teil von CSS3 zu implementieren, ließ sich ein Schatten mit einer einzigen CSS-Deklaration erzeugen. Bildressourcen waren nicht mehr nötig, Seiten luden leichter, und Schatten behielten ihre Form korrekt bei, auch wenn sich das Layout responsiv an die Bildschirmgröße anpasste.

Als Google 2014 Material Design vorstellte, baute es das Konzept der "elevation" auf box-shadow auf: Jedem Element wird eine Höhe entlang der Z-Achse zugewiesen, und höher platzierte Elemente werfen größere, dunklere Schatten. Das verlieh sonst flachen Oberflächen ein Gefühl von Tiefe und Hierarchie – eine Idee, die viele Designsysteme bis heute prägt.

Alle Wissenstexte ansehen