CSS Box Shadow Generator
Erstellen Sie CSS-Box-Shadow-Werte visuell – passen Sie Offset, Unschärfe, Ausbreitung und Farbe mit einer Live-Vorschau an.
CSS-Ausgabe
box-shadow: 0px 4px 12px 0px #00000026;Warum den Boxschattengenerator von PixConvert verwenden?
Visueller Box-Shadow-Editor – kein Schätzen von Werten, einfach ziehen und in der Vorschau anzeigen.
Live-Vorschau
Sehen Sie Ihren Schatten auf einer realistischen Kartenvorschau – die Aktualisierung erfolgt sofort bei jeder Änderung des Schiebereglers.
Mehrere Schattenebenen
Für fortgeschrittene Tiefeneffekte können mehrere Schattenebenen übereinandergelegt werden. Jede Ebene lässt sich unabhängig steuern.
Eingesetzte Schatten
Aktivieren/Deaktivieren Sie den Einblendmodus für Effekte durch gedrückte Tasten und verschiedene Innenleuchtstile.
Farbe + Deckkraft
Wählen Sie eine beliebige Schattenfarbe mit einem separaten Deckkraftregler. Die Ausgabe verwendet RGBA für präzise Transparenz.
Fertige CSS-Ausgabe
Die Ausgabe ist ein gültiger CSS-Wert für box-shadow – fügen Sie ihn direkt in Ihr Stylesheet oder 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.
Kartenerhöhung
Erstellen Sie Höhenschatten im Material Design-Stil für Karten, Modalfenster und Panels.
- Schattenskalen für Höhenunterschiede 1-24
- Schatten von schwebenden Aktionsschaltflächen
- Dialogüberlagerungsschatten
Tastentiefe
Verleihen Sie den Schaltflächen durch dezente Schlagschatten und eingeprägte Druckeffekte mehr 3D-Tiefe.
- Dezenter Schlagschatten beim Überfahren mit der Maus
- Schatten für gedrückten Zustand einblenden
- Farbige Leuchteffekte
Neumorphismus
Erstellen Sie neumorphe UI-Komponenten mithilfe von geschichteten hellen und dunklen Schatten.
- Licht- und Schattenschichten
- erhabene Elemente der Soft UI
- konkave Bedienelemente eingelassen
So erstellen Sie einen Schlagschatten
Passen Sie X- und Y-Versatz, Weichzeichnungsradius und Streuung mithilfe der Schieberegler an. Wählen Sie eine Schattenfarbe und Deckkraft.
Die Live-Vorschau wird sofort aktualisiert. Kopieren Sie den CSS-Wert und fügen Sie ihn in Ihr Stylesheet ein.
Setzen Sie Schatten ein oder stapeln Sie mehrere Schatten, um mehrschichtige Effekte zu erzeugen – die Ausgabe ist kommagetrennt und kann direkt eingefügt werden.
Weitere Tools entdecken
Entdecken Sie weitere kostenlose Tools, die hervorragend mit diesem Tool harmonieren.
CSS-Gradientengenerator
Erstellen Sie benutzerdefinierte CSS-Verläufe visuell
Kontrastprüfer
Überprüfen Sie die Farbkontrastverhältnisse auf WCAG-Konformität.
Farbkonverter
Konvertieren Sie HEX-, RGB- und HSL-Farbcodes sofort
Farbpaletten-Extraktor
Dominante Farben aus beliebigen Bildern extrahieren
JSON-Formatter
JSON sofort formatieren, validieren und minimieren
Regex-Tester
Reguläre Ausdrücke live testen und debuggen
Häufig gestellte Fragen
CSS-Box-Shadow erklärt.
Was sind die Parameter für den Box-Shadow?
box-shadow: [inset] x-offset y-offset blur-radius spread-radius color. X/Y-Offset: Schattenposition. Blur: Weichheit (0 = harte Kante). Spread: Größenvergrößerung (negativ = kleiner). Inset: Schatten innerhalb des Elements zeichnen.
Wie erzeuge ich einen weichen Schatten?
Erhöhen Sie den Weichzeichnungsradius (20–40 px), halten Sie die Streuung nahe 0 und verwenden Sie eine Farbe mit geringer Deckkraft (rgba(0,0,0,0.1–0.2)). Verschieben Sie das Element leicht (y: 4–8 px). Dadurch entsteht der moderne, weiche Schlagschatten, der in Designsystemen üblich ist.
Kann ich mehrere Schatten übereinanderlegen?
Ja. CSS akzeptiert mehrere durch Kommas getrennte Schattenwerte: `box-shadow: shadow1, shadow2, shadow3`. Verwenden Sie die Schaltfläche „Schattenebene hinzufügen“, um mehrschichtige Effekte wie Neumorphismus oder mehrfarbige Leuchteffekte zu erstellen.
Was ist der Unterschied zwischen Unschärfe und Streuung?
Die Weichzeichnung steuert, wie weich die Schattenkante ist – stärkere Weichzeichnung bedeutet einen diffuseren Schatten. Die Streuung steuert die Größe des Schattens – eine positive Streuung macht den Schatten größer als das Element, eine negative Streuung verkleinert ihn. Die Streuung hat keinen Einfluss auf die Weichzeichnung.
Hat der Box-Shadow Einfluss auf das Layout?
Nein. Der Schatteneffekt (box-shadow) wird außerhalb des Boxmodells gerendert und beeinflusst weder die Elementgröße noch die Position oder den Dokumentfluss. Wenn Sie um das Element herum Platz für den Schatten benötigen, verwenden Sie stattdessen Margin oder Padding.