CSS-Box-Shadow-Generator
Gestalten Sie Box-Shadow-Werte visuell. Legen Sie den horizontalen und vertikalen Versatz in Pixel, den Unschärferadius (weiche Kante), die Ausbreitung (den Schatten vor der Unschärfe vergrößern oder verkleinern), die Farbe, die Deckkraft und optional den Einsatz für innere Schatten fest. Die Vorschaubox wird live aktualisiert. Kopiere die vollständige Box-Shadow-Deklaration in dein CSS. Verstehen Sie, wie jeder Parameter Höhe und Tiefe ohne Versuch und Irrtum in Devtools ändert.
X (px)
Y (px)
Unschärfe (px)
Ausbreitung (px)
Farbe
Deckkraft (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
So bauen Sie einen Kastenschatten
1. Legen Sie den X- und Y-Versatz fest — ein positives X verschiebt den Schatten nach rechts, ein positives Y verschiebt ihn nach unten.
2. Passe die Unschärfe (Weichheit) und die Ausbreitung (Größe vor der Unschärfe) an.
3. Wähle Schattenfarbe und Deckkraft.
4. Schalten Sie „Einfügung“ um, wenn der Schatten innerhalb des Felds erscheinen soll. CSS kopieren.
Schattenrezepte
Softcard-Erhöhung
offsetY 8px, Unschärfe 24px, Ausbreitung 0, Schwarz bei 18 % Deckkraft — eine schwebende Karte im Materialstil: box-shadow: 0 8px 24px __KEEP0__.
Scharfer Schlagschatten
Unschärfe 0, Ausbreitung 0, OffsetY 4 Pixel — harte Kante wie ein Aufkleber, der leicht von der Seite abgehoben wird.
Eingesetzter gedrückter Knopf
Einfügung mit kleiner Unschärfe aktivieren — simuliert ein gedrücktes oder versenktes Steuerelement innerhalb des Elements.
Wann sich dieses Tool lohnt
• Wenn du die UI-Tiefe für Karten, Modalitäten und Schaltflächen optimieren.
• Wenn du lernen, wie sich Unschärfe von Streuung unterscheidet.
• Wenn du Design-Tokens mit genauen Schattenwerten dokumentieren.
Wann du besser etwas anderes wählst?
• Wenn du mehrere gestapelte Schatten benötigen, kopieren Sie die erste Ebene hierher und fügen Sie dann weitere in CSS hinzu.
• Wenn du Textschatten benötigen — andere Eigenschaft mit ähnlicher Syntax.
• Wenn du einen Schlagschatten auf unregelmäßigen PNG-Formen benötigen, funktioniert der Filter: drop-shadow() möglicherweise besser.
Lesen der vier Zahlen
box-shadow: 0 8px 24px 0 means x=0, y=8px down, blur=24px, spread=0. Omit spread and browsers default spread to 0. Large blur with zero offset creates a glow; Ein großer Versatz mit kleiner Unschärfe erzeugt gerichtetes Licht.
Schatten überlagern
Mehrere Schatten durch Kommas trennen: box-shadow: 0 1px 2px __KEEP0__, 0 4px 12px __KEEP1__; Erste Schattenfarben, darunter spätere. Kombinieren Sie einen engen dunklen Schatten mit einem breiten hellen Schatten für realistische Tiefe.
Zugänglichkeit und Leistung
Starke Schatten auf großen animierten Bereichen können GPU-Malzeit kosten. Bevorzugen Sie subtile Schatten für datenreiche Benutzeroberflächen. Stelle sicher, dass fokussierte Elemente sichtbar bleiben — verlassen Sie sich nicht nur auf den Schatten, um den Zustand anzuzeigen; Paar mit Rahmen oder Umriss für Tastaturbenutzer.
Häufige Fragen
Was ist die Box-Shadow-Syntax?
box-shadow: offset-x offset-y blur-radius spread-radius color; Das optionale Schlüsselwort „inset“ erzeugt einen inneren Schatten.
Unschärfe vs. Ausbreitung?
Unschärfe macht den Schattenrand weicher. Durch die Streuung wird die Schattenform erweitert oder verkleinert, bevor sie verschwimmt — die positive Streuung vergrößert sich, die negative schrumpft.
Welche Einheiten sollte ich verwenden?
Dieses Tool gibt Pixel (px) aus, die häufigste Wahl für Schatten auf der Bildschirmoberfläche.
Was macht der Einsatz?
„Einschub“ zeichnet den Schatten innerhalb des Elementrahmens — nützlich für versunkene Eingänge oder Brunnen.
Kann die Schattenfarbe halbtransparent sein?
Ja. Die Deckkraft wird auf die ausgewählte Farbe angewendet und erzeugt eine RGBA-Ausgabe für glatte Kanten auf unterschiedlichen Hintergründen.
Werden Werte an einen Server gesendet?
Nein. Vorschau und CSS sind lokal.
Ist das kostenlos?
Ja, kein Konto erforderlich.