Einen Box-Shadow Ebene für Ebene aufbauen
Dieser Box-Shadow-Generator schreibt die CSS-Eigenschaft <code>box-shadow</code> für Sie. Stapeln Sie so viele Schattenebenen wie nötig, stellen Sie für jede den horizontalen und vertikalen Versatz, die Unschärfe, die Ausdehnung, die Farbe und die Deckkraft ein, machen Sie daraus einen inneren Schatten (inset) und sehen Sie, wie sich die Vorschau-Box auf jedem Hintergrund aktualisiert. Starten Sie mit Vorlagen für weiche Schatten, Elevation im Material-Stil, Neumorphism, harte Versätze und Leuchteffekte, und kopieren Sie dann das CSS oder eine Tailwind-Klasse <code>shadow-[…]</code>. Fügen Sie einen vorhandenen Schatten ein, um ihn zu bearbeiten. Alles läuft in Ihrem Browser.
So erstellen Sie einen CSS-Box-Shadow
- 1Wählen Sie eine Vorlage, die Ihrem Ziel nahekommt, oder behalten Sie den mehrschichtigen Standardschatten.
- 2Wählen Sie eine Ebene und stellen Sie Versatz X und Y, Unschärfe, Ausdehnung, Farbe und Deckkraft ein. Aktivieren Sie Inset, um den Schatten innerhalb der Box zu zeichnen.
- 3Kombinieren Sie mehrere Schatten mit Ebene hinzufügen, Duplizieren, Umsortieren und Ausblenden.
- 4Passen Sie Hintergrund der Vorschau, Box-Farbe, Eckenradius und Größe an Ihr Design an.
- 5Kopieren Sie das CSS oder die Tailwind-Klasse.
Die box-shadow-Werte erklärt
- Versatz X und Y
- Wie weit der Schatten nach rechts und nach unten verschoben wird. Negative Werte verschieben ihn nach links und oben. Eine Lichtquelle über der Seite bedeutet einen positiven Y-Versatz.
- Unschärferadius
- Wie weich die Kante ist. 0 ergibt eine scharfe Kopie der Box; größere Werte verteilen den Schatten auf eine breitere, blassere Fläche. Er kann nicht negativ sein.
- Ausdehnungsradius
- Vergrößert oder verkleinert den Schatten, bevor er weichgezeichnet wird. Eine negative Ausdehnung mit großer Unschärfe verhindert, dass ein weicher Schatten an den Seiten hervorschaut – der Trick hinter den meisten „weichen“ Schatten.
- Farbe
- Meist Schwarz oder ein dunkler Ton des Hintergrunds mit geringer Deckkraft. Ein Schatten im Farbton des Hintergrunds wirkt natürlicher als reines Grau.
- inset
- Zeichnet den Schatten innerhalb des Rahmens statt außen, sodass die Box eingedrückt wirkt. Innere und äußere Schatten lassen sich in einer Deklaration mischen.
Warum mehrere Schatten übereinanderlegen?
Echte Schatten haben einen dunklen, engen Kern, wo ein Objekt die Fläche fast berührt, und weiter außen einen weichen, breiten Halbschatten. Eine einzelne box-shadow-Ebene kann nur eines davon zeichnen. Zwei bis fünf Ebenen mit jeweils verdoppeltem Versatz und verdoppelter Unschärfe, alle mit geringer Deckkraft, ergeben die weiche, realistische Tiefe moderner Design-Systeme. Genau das ist die Vorlage Weich geschichtet.
Ebenen werden von vorne nach hinten gezeichnet: Die erste in der Liste liegt oben. Sortieren Sie sie mit den Pfeiltasten um und blenden Sie eine Ebene mit dem Augensymbol aus, um zu sehen, was sie beiträgt. Ausgeblendete Ebenen fehlen im kopierten CSS.
Elevation, Neumorphism und andere Stile
Die Vorlagen Elevation 1–5 folgen den klassischen Kartenschatten von Material Design: Jede Stufe kombiniert einen Umgebungsschatten mit einem Hauptschatten und hebt die Karte weiter von der Seite ab.
Neumorphism verwendet zwei Schatten auf einer Box in der Farbe ihres Hintergrunds: einen dunklen nach rechts unten und einen hellen nach links oben versetzt. Das funktioniert nur, wenn Box und Hintergrund gleich gefärbt sind, deshalb setzt die Vorlage beides. Harter Versatz verzichtet ganz auf Unschärfe für einen flachen, brutalistischen Look, und Leuchten nutzt einen Versatz von null mit farbigem Schatten für Fokusringe und Neon-Effekte auf dunklem Hintergrund.
Box-Shadows in Tailwind CSS
Die eingebauten Klassen shadow-sm bis shadow-2xl von Tailwind decken die üblichen Fälle ab. Für alles andere schreibt der Generator einen beliebigen Wert wie shadow-[0_10px_30px_-5px_rgba(0,0,0,0.15)]: Leerzeichen werden zu Unterstrichen, weil Klassennamen keine Leerzeichen enthalten dürfen, und die Klasse funktioniert in Tailwind 3 und 4, ohne die Konfiguration zu ändern.
Kombinieren Sie einen Schatten mit einem Hintergrund aus dem CSS-Verlauf-Generator oder prüfen Sie mit dem Kontrastprüfer, ob der Text auf Ihrer Karte lesbar bleibt.
Schatten und Performance
Große Unschärferadien zeichnet in allen aktuellen Browsern die GPU, und auf statischen Elementen kosten sie wenig. Wird box-shadow dagegen animiert, muss das Element in jedem Frame neu gezeichnet werden; um Tiefe beim Hover zu animieren, legen Sie den größeren Schatten auf ein Pseudo-Element und animieren stattdessen dessen opacity.
Häufige Fragen
- Wie lautet die Syntax von box-shadow?
- box-shadow: [inset] offset-x offset-y [blur] [spread] Farbe;. Nur die beiden Versätze sind Pflicht. Mehrere Schatten werden durch Kommas getrennt, zum Beispiel box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.1);.
- Wie erstelle ich einen weichen, dezenten Schatten?
- Verwenden Sie Schwarz mit geringer Deckkraft (10–20 %), große Unschärfe, einen kleinen Y-Versatz und eine negative Ausdehnung, etwa 0 10px 30px -5px rgba(0,0,0,0.15). Zwei oder drei solcher Schatten übereinander wirken noch weicher.
- Wie setze ich einen Schatten nur auf eine Seite?
- Versetzen Sie den Schatten zu dieser Seite und nutzen Sie eine negative Ausdehnung etwa so groß wie die Unschärfe, damit er an den anderen Seiten nicht sichtbar ist, zum Beispiel 0 8px 6px -6px rgba(0,0,0,0.3) für einen Schatten nur unten.
- Was bewirkt inset?
- inset zeichnet den Schatten innerhalb der Box statt dahinter, sodass das Element in die Seite eingedrückt wirkt. Das ist bei Eingabefeldern und gedrückten Buttons üblich.
- Was ist der Unterschied zwischen box-shadow und drop-shadow?
- box-shadow folgt der Box des Elements und ihrem Eckenradius. Die Funktion filter: drop-shadow() folgt den tatsächlich sichtbaren Pixeln, etwa dem Umriss eines transparenten PNG oder eines SVG-Icons, kennt aber weder Ausdehnung noch inset.
- Wie nutze ich einen eigenen Box-Shadow in Tailwind?
- Kopieren Sie die Tailwind-Klasse aus dem Generator, einen beliebigen Wert wie shadow-[0_4px_12px_rgba(0,0,0,0.15)], und fügen Sie sie dem Element hinzu. Sie können den CSS-Wert auch in den boxShadow-Einstellungen Ihres Themes ablegen, um ihm einen Namen zu geben.
- Kann ich einen vorhandenen Schatten bearbeiten?
- Ja. Fügen Sie einen box-shadow-Wert, eine vollständige Deklaration oder eine Tailwind-Klasse shadow-[…] unter Import ein. Längen in rem und em werden mit 16px umgerechnet.
- Wird mein CSS irgendwohin gesendet?
- Nein. Der Generator läuft vollständig in Ihrem Browser.