Zum Inhalt springen
SPCXTools

Box Shadow Generator

Passe weiche, harte, mehrschichtige oder Inset-Schatten mit einer Live-Vorschau an und kopiere den CSS-Code.

Läuft lokal – Dateien verlassen dein Gerät nicht

Tool wird geladen…

So nutzt du: Box Shadow Generator

  1. 1Wähle eine Vorlage wie Weich, Mehrschichtig oder Inset, oder passe den Standard-Schatten an.
  2. 2Ziehe die Regler für horizontalen und vertikalen Versatz, Unschärfe, Ausbreitung und Deckkraft, und wähle eine Schattenfarbe.
  3. 3Füge weitere Ebenen für eine realistische Tiefe hinzu und lege den Eckenradius sowie die Vorschaufarben fest.
  4. 4Kopiere den CSS-Code und füge ihn in dein Stylesheet ein.

CSS-Schatten visuell erstellen

Schatten verleihen Benutzeroberflächen Tiefe: Sie heben Cards von der Seite ab, zeigen, welcher Button gedrückt ist, und trennen einen Dialog vom dahinterliegenden Inhalt. Die CSS-Eigenschaft box-shadow ist mächtig, aber ihre fünf Werte lassen sich blind nur schwer anpassen. Dieser Generator bietet dir Schieberegler und eine Live-Vorschau, lässt dich für einen natürlichen Look mehrere Schatten übereinanderlegen und liefert sauberes CSS, das du direkt in dein Projekt einfügen kannst.

Funktionen

  • Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft anpassen mit sofortiger Vorschau.
  • Bis zu fünf Ebenen, kombiniert in einer einzigen box-shadow-Deklaration.
  • Innere Schatten (Inset) für eingedrückte und vertiefte Effekte.
  • Eckenradius und Vorschaufarben passend zu deinem Design.
  • Vorlagen für weiche, mittlere, harte, mehrschichtige, innere und leuchtende Schatten.
  • Kopierfertiges CSS mit Farben im rgba()-Format.

Beispiel

Ein mehrschichtiger Schatten, der auf hellen Hintergründen natürlich wirkt:

.card {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
    0px 4px 8px 0px rgba(0, 0, 0, 0.07),
    0px 16px 32px 0px rgba(0, 0, 0, 0.07);
  border-radius: 16px;
}

Tipps zur Schattengestaltung

Ziel Empfohlene Einstellungen
Dezente Card auf Weiß y 4, Unschärfe 12, Deckkraft 8%
Schwebendes Dropdown oder Dialog 2–3 Ebenen, y bis 24, Unschärfe bis 48, Deckkraft je 7–12%
Retro-"Flat"-Look x 6, y 6, Unschärfe 0, Deckkraft 100%
Fokus- oder Leuchteffekt x 0, y 0, Unschärfe 16–24, Ausbreitung 2–4, Markenfarbe
Gedrücktes Eingabefeld inset, y 2, Unschärfe 6, Deckkraft 25–30%

Halte die Lichtquelle konsistent: Wenn Schatten bei einer Komponente nach unten fallen, sollten sie überall nach unten fallen.

Ähnliche Tools

Erstelle den Hintergrund für deine Karten mit dem CSS Gradient Generator, konvertiere Farben zwischen HEX, RGB und HSL mit dem Farbkonverter oder wähle Farben aus einem Screenshot mit dem Bild-Farbwähler.

Häufige Fragen

Was bedeuten die vier Werte bei box-shadow?
In dieser Reihenfolge: horizontaler Versatz (positiv verschiebt den Schatten nach rechts), vertikaler Versatz (positiv nach unten), Blur-Radius (größer ist weicher) und Spread (positiv macht den Schatten größer als das Element, negativ kleiner). Die Farbe kommt zum Schluss.
Warum sollte man mehrere Schatten kombinieren?
Echte Schatten sind nah am Objekt scharf und dunkel, weiter weg weich und blass. Das Kombinieren von zwei oder drei Schatten mit zunehmendem Versatz und Blur, aber geringer Deckkraft, ahmt dies nach und wirkt viel natürlicher als ein einzelner, starker Schatten.
Was ist ein Inset-Schatten?
Ein Inset-Schatten wird innerhalb des Elements statt außerhalb gezeichnet, wodurch es eingedrückt wirkt. Er wird oft für Eingabefelder, gedrückte Buttons und Vertiefungen genutzt.
Warum sieht mein Schatten auf farbigem Hintergrund grau aus?
Schwarze Schatten wirken auf farbigen Flächen oft stumpf. Nutze für den Schatten lieber einen dunkleren Ton der Hintergrundfarbe statt reinem Schwarz – das wirkt satter und natürlicher.
Wirken sich box-shadows auf die Performance aus?
Ein paar Schatten kosten kaum Leistung. Sehr große Blur-Radien auf vielen Elementen oder das Animieren von box-shadow beim Scrollen können das Rendering auf schwächeren Smartphones verlangsamen. Um einen Schatten zu animieren, ändere stattdessen die Deckkraft (opacity) eines Pseudo-Elements, das den Schatten trägt.

Ähnliche Tools

CSS Gradient GeneratorGestalte visuell einen Hintergrund-Farbverlauf und kopiere das CSS — linear, radial oder konisch.FarbkonverterJede Farbe zwischen HEX, RGB, HSL, HSV und CMYK umrechnen und den Kontrast prüfen.Bild-FarbpipetteKlicke auf eine beliebige Stelle im Bild, um die genauen HEX-, RGB- und HSL-Werte zu ermitteln — inklusive der Hauptfarbpalette.Farbenblindheit-SimulatorBetrachte deine Bilder durch die Augen von Menschen mit Farbfehlsichtigkeit, um sicherzustellen, dass deine Designs barrierefrei sind.Farbkontrast-CheckerPrüfe, ob dein Text ausreichend lesbar ist — und finde die ähnlichste Farbe, die den WCAG-Richtlinien entspricht.Farbpaletten-GeneratorWähle eine Farbe und erhalte eine harmonische Fünf-Farben-Palette basierend auf der Farbtheorie.