Box-Shadow-Generator

Stelle mit den Reglern einen Schlagschatten oder Innenschatten für die Vorschaubox ein und kopiere anschließend den generierten box-shadow-CSS-Code. Steuere horizontalen und vertikalen Versatz, Weichzeichnungsradius, Ausbreitungsradius, Farbe und Deckkraft — ohne die Reihenfolge der Argumente auswendig zu lernen oder Farben von Hand in rgba() umzurechnen.

Was ist dieses Tool?

box-shadow ist die CSS-Eigenschaft, die einen Schatten hinter (oder innerhalb) einem Element zeichnet. Von Hand geschrieben benötigt sie bis zu fünf Werte in fester Reihenfolge — horizontaler Versatz, vertikaler Versatz, Weichzeichnungsradius, Ausbreitungsradius und eine Farbe — plus das optionale Schlüsselwort inset. Beim ersten Versuch bringt man das leicht durcheinander oder der Schatten wird zu subtil oder zu stark.

Dieses Tool macht daraus direkte Manipulation: Regler ziehen, den Schatten in der Live-Vorschaubox verändern sehen und den exakten CSS-Code kopieren, sobald er passt. Der Farbwähler zusammen mit einem Deckkraft-Regler erzeugt automatisch einen passenden rgba()-Wert, denn transparente Schatten wirken in der Regel realistischer als vollständig deckende.

Warum sollte man es nutzen?

Die Vorschau aktualisiert sich sofort bei jeder Anpassung — du siehst den exakten Schatten, bevor du dich auf Code festlegst.
Volle Kontrolle über Versatz-x, Versatz-y, Weichzeichnung, Ausbreitung, Farbe und Deckkraft an einem Ort.
Ein Klick fügt inset für einen eingedrückten/vertieften Look statt eines schwebenden Schlagschattens hinzu.
Erzeugt copy-paste-fertigen CSS-Code, bei dem die Farbe bereits mit der gewählten Deckkraft in rgba() umgerechnet ist.
Läuft komplett in deinem Browser — nichts, was du einstellst, wird irgendwohin hochgeladen.
Kostenlos, keine Anmeldung, funktioniert auf dem Handy.

Anleitung

Stelle Versatz-X und Versatz-Y ein, um den Schatten zu positionieren — positive Werte verschieben ihn nach rechts/unten, negative nach links/oben.
Erhöhe den Weichzeichnungsradius, um die Kante des Schattens weicher zu machen; erhöhe die Ausbreitung, um den Schatten größer als das Element selbst zu machen.
Wähle eine Farbe und passe die Deckkraft an — die meisten realistischen Schatten verwenden 15–40 % Deckkraft statt einem satten Schwarz.
Aktiviere 'Innenschatten (inset)', wenn der Schatten innerhalb des Rands des Elements erscheinen soll statt dahinter.
Kopiere den generierten CSS-Code und füge ihn in dein Stylesheet ein.

Beispiel

Eingabe

Versatz: 0px, 10px · Weichzeichnung: 20px · Ausbreitung: 0px · Farbe: Schwarz bei 35 % Deckkraft

Ausgabe

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Ein weicher Schatten direkt unter dem Element ohne horizontalen Versatz — einer der häufigsten Schattenstile für Karten und Buttons.

Einzelner Schatten vs. mehrschichtige Schatten

Dieses Tool erzeugt eine einzelne Schattenebene, was die überwiegende Mehrheit der realen Anwendungsfälle abdeckt — Buttons, Karten, Modals und Dropdowns verwenden fast immer nur einen Schatten. CSS unterstützt außerdem durch Kommas getrennte mehrfache Schatten auf demselben Element für aufwendigere Tiefeneffekte (z. B. ein enger, dunkler Schatten unter einem weichen, breiten), aber das ist eine Verfeinerung, die du von Hand ergänzen kannst: erzeuge hier einen Schatten, dupliziere die Zeile, passe den zweiten Wertesatz an und verbinde beide mit einem Komma.

Häufige box-shadow-Muster

Dezentes Karten-Anheben: kleiner Versatz (0–4px), moderate Weichzeichnung (8–16px), Schwarz mit 10–20 % Deckkraft.
Angehobenes Modal/Dropdown: größerer Versatz (4–10px) und Weichzeichnung (20–30px), 20–35 % Deckkraft für ein stärkeres Schwebegefühl.
Gedrückter/eingedrückter Button: inset aktivieren, kleinen Versatz und moderate Weichzeichnung verwenden, damit der Schatten wie eine Vertiefung statt einer Anhebung wirkt.
Farbiges Leuchten: statt Schwarz eine Markenfarbe wählen, Deckkraft auf 40–60 % erhöhen und die Ausbreitung leicht vergrößern für einen sanften Leuchteffekt um Buttons.
Scharfer/harter Schatten: Weichzeichnung auf 0 und Ausbreitung auf 0 setzen für eine feste, versetzte Silhouette statt eines weichen Schattens.

Kombination mit abgerundeten Ecken

Schatten und abgerundete Ecken werden ständig zusammen verwendet — Karten, Buttons und Modals kombinieren fast immer beides. Nutze den Border-Radius-Generator, um die Ecken desselben Elements abzurunden, und wende beide generierten CSS-Deklarationen gemeinsam an.

→ Border-Radius-Generator · Einheitenumrechner

Häufig gestellte Fragen

Was ist der Unterschied zwischen Weichzeichnung und Ausbreitung?

Der Weichzeichnungsradius macht die Kante des Schattens weicher — höhere Werte lassen ihn allmählicher ausblenden. Der Ausbreitungsradius ändert die Größe des Schattens vor dem Weichzeichnen — eine positive Ausbreitung macht den Schatten auf allen Seiten größer als das Element, eine negative schrumpft ihn. Die meisten alltäglichen Schatten nutzen Weichzeichnung, während die Ausbreitung auf 0 bleibt.

Warum rgba() statt einer einfachen Hex-Farbe für den Schatten verwenden?

Ein vollständig deckender Schatten wirkt hart und unrealistisch — echte Schatten sind immer etwas transparent und lassen das, was dahinter liegt, leicht durchscheinen. rgba() erlaubt es, diese Transparenz direkt festzulegen, weshalb dieses Tool die Farbe immer mit einem Alphawert statt als satte Hex-Farbe ausgibt.

Was bewirkt das Schlüsselwort inset?

Ohne inset wird der Schatten außerhalb des Elementrands gezeichnet, als würde das Element über der Seite schweben. Mit inset wird der Schatten stattdessen innerhalb des Rands gezeichnet, wodurch das Element eingedrückt oder vertieft wirkt — häufig verwendet für aktive/gedrückte Button-Zustände oder Eingabefelder.

Kann ich mehr als einen Schatten auf demselben Element stapeln?

Ja — CSS box-shadow akzeptiert eine durch Kommas getrennte Liste, und Browser rendern sie in der angegebenen Reihenfolge (der erste Schatten liegt oben). Eine gängige Technik kombiniert einen engen, dunkleren Schatten mit einem breiteren, weicheren für realistischere Tiefe, als jeder für sich allein bieten würde.

Beeinflusst box-shadow das Layout oder nur das Aussehen?

Nur das Aussehen — box-shadow beeinflusst nie die Größe des Elements oder die Position umliegender Elemente, selbst bei großen Weichzeichnungs- oder Ausbreitungswerten. Wenn der Schatten visuell abgeschnitten wirkt, prüfe overflow: hidden an einem übergeordneten Element statt der eigenen Schattenwerte.