CSS Box-Shadow-Generator
Erstellen Sie CSS-box-shadow-Werte visuell – passen Sie Versatz, Unschärfe, Ausbreitung und Farbe mit Live-Vorschau an.
CSS-Ausgabe
box-shadow: 0px 4px 12px 0px #00000026;Warum der PixConvert Box-Shadow-Generator
Visueller box-shadow-Editor – kein Raten bei den Werten, einfach ziehen und Vorschau ansehen.
Live-Vorschau
Sehen Sie Ihren Schatten auf einer realistischen Kartenvorschau – sie aktualisiert sich sofort bei jeder Reglerbewegung.
Mehrere Schattenebenen
Stapeln Sie mehrere Schattenebenen für aufwendige Tiefeneffekte. Jede Ebene lässt sich unabhängig steuern.
Innenschatten
Aktivieren Sie den Inset-Modus für Effekte wie gedrückte Buttons und innere Leuchtstile.
Farbe + Deckkraft
Wählen Sie eine beliebige Schattenfarbe mit separatem Deckkraft-Regler. Die Ausgabe nutzt rgba für präzise Transparenz.
Fertige CSS-Ausgabe
Die Ausgabe ist ein gültiger box-shadow-CSS-Wert – fügen Sie ihn direkt in Ihr Stylesheet oder Ihr Design-Token ein.
100 % privat
Rein clientseitig – kein Server, keine Datenerfassung.
Anwendungsfälle für Box-Shadow
Schatten erzeugen Tiefe und Hierarchie im UI-Design.
Karten-Elevation
Erstellen Sie Elevation-Schatten im Material-Design-Stil für Karten, Modals und Panels.
- Schattenskalen für Elevation 1–24
- Schatten für Floating Action Buttons
- Schatten für Dialog-Overlays
Button-Tiefe
Fügen Sie Buttons dezente Schlagschatten und Inset-Effekte für gedrückte Zustände hinzu, um 3D-Tiefe zu erzeugen.
- Dezenter Schlagschatten beim Hover
- Innenschatten für den gedrückten Zustand
- Farbige Leuchteffekte
Neumorphismus
Erstellen Sie neumorphe UI-Komponenten mit geschichteten hellen und dunklen Schatten.
- Helle + dunkle Schattenebenen
- Erhabene Elemente im Soft-UI-Stil
- Eingelassene konkave Steuerelemente
So erstellen Sie einen Box-Shadow
Passen Sie X-Versatz, Y-Versatz, Unschärferadius und Ausbreitung mit den Reglern an. Wählen Sie Schattenfarbe und Deckkraft.
Die Live-Vorschau aktualisiert sich sofort. Kopieren Sie den CSS-Wert und fügen Sie ihn in Ihr Stylesheet ein.
Aktivieren Sie Innenschatten oder stapeln Sie mehrere Schatten für geschichtete Effekte – die Ausgabe ist durch Kommas getrennt und sofort einsatzbereit.
Weitere Tools entdecken
Entdecken Sie weitere kostenlose Tools, die sich gut mit diesem ergänzen
CSS-Verlaufsgenerator
Eigene CSS-Verläufe visuell erstellen
Kontrastprüfer
Farbkontrastverhältnisse auf WCAG-Konformität prüfen
Farbkonverter
HEX-, RGB- und HSL-Farbcodes sofort umwandeln
Farbpaletten-Extraktor
Dominante Farben aus jedem Bild extrahieren
JSON-Formatierer
JSON sofort formatieren, validieren und minimieren
Regex-Tester
Reguläre Ausdrücke live testen und debuggen
Häufig gestellte Fragen
CSS box-shadow einfach erklärt.
Welche Parameter hat box-shadow?
box-shadow: [inset] x-offset y-offset blur-radius spread-radius color. X-/Y-Versatz: Position des Schattens. Blur: Weichheit (0 = harte Kante). Spread: Größenänderung (negativ = kleiner). Inset: zeichnet den Schatten innerhalb des Elements.
Wie erstelle ich einen weichen Schatten?
Erhöhen Sie den Unschärferadius (20–40px), lassen Sie die Ausbreitung nahe 0 und verwenden Sie eine Farbe mit niedriger Deckkraft (rgba(0,0,0,0.1-0.2)). Versetzen Sie den Schatten leicht (y: 4–8px). So entsteht der moderne „Soft Drop Shadow“, der in Designsystemen üblich ist.
Kann ich mehrere Schatten stapeln?
Ja. CSS akzeptiert mehrere durch Kommas getrennte Schattenwerte: box-shadow: shadow1, shadow2, shadow3. Mit der Schaltfläche „Schattenebene hinzufügen“ erstellen Sie geschichtete Effekte wie Neumorphismus oder mehrfarbige Leuchteffekte.
Was ist der Unterschied zwischen Blur und Spread?
Blur steuert, wie weich der Schattenrand ist – je höher der Blur, desto diffuser. Spread steuert die Größe des Schattens – ein positiver Spread macht den Schatten größer als das Element, ein negativer macht ihn kleiner. Spread beeinflusst den Blur nicht.
Beeinflusst box-shadow das Layout?
Nein. box-shadow wird außerhalb des Box-Modells gerendert und beeinflusst weder Elementgröße noch Position oder Dokumentfluss. Wenn Sie Platz um das Element für den Schatten benötigen, verwenden Sie stattdessen margin oder padding.