CSS Box-Shadow Builder
Understand CSS Box-Shadow Builder
Baut CSS-box-shadow-Deklarationen aus Reglern für Versatz, Weichzeichnung, Ausbreitung, Farbe und inset, mit Unterstützung für mehrere übereinandergelegte Ebenen.
How it works
Die Syntax lautet `box-shadow: [inset] offset-x offset-y blur spread color`. Die Versätze verschieben eine Kopie der Box des Elements; spread vergrößert oder verkleinert diese Kopie, bevor sie weichgezeichnet wird; die Weichzeichnung mildert die Kante dann über etwa die Weichzeichnungsdistanz hinweg ab, mittig zur Kante, sodass rund die Hälfte innerhalb und die Hälfte außerhalb der Form liegt. Mehrere Schatten werden durch Kommata getrennt und von vorn nach hinten gezeichnet, der erste in der Liste liegt also obenauf – und deshalb entsteht realistische Tiefe eher durch einen kleinen engen Schatten über einem großen diffusen als durch eine einzelne große Weichzeichnung.
When to use it
- Eine Elevationsskala für ein Designsystem bauen, in der jede Stufe ein einheitliches Paar übereinandergelegter Schatten ist
- Einen Innenschatten für eine gedrückte Schaltfläche, eine Vertiefung oder ein Eingabefeld erzeugen
- Eine Haarlinie mit einem Ausbreitungsschatten ohne Weichzeichnung ziehen, die anders als ein echter Rahmen das Layout nicht beeinflusst
- Einen Schatten aus einer Designdatei nachbauen, ohne dessen Versatz- und Weichzeichnungswerte von Hand zu entschlüsseln
Watch out for
- box-shadow folgt der Rahmenbox und ihrem border-radius, nicht der Grafik darin. Für ein transparentes PNG oder ein SVG-Icon wollen Sie `filter: drop-shadow()`, das der Alpha-Silhouette folgt.
- Innenschatten werden innerhalb der Padding-Box gezeichnet und vom Rahmen beschnitten. Ein Innenschatten an einem Element ohne Innenabstand kann fast vollständig hinter dessen eigenem Inhalt verschwinden.
- Große Weichzeichnungsradien sind teuer zu zeichnen und werden bei jedem Neuzeichnen neu berechnet. Ein Dutzend Schatten mit 60px in einer scrollenden Liste kostet auf schwachen Geräten messbar Bildrate.
- Ein Schatten an einem beschnittenen Element verschwindet. Sowohl clip-path als auch `overflow: hidden` an einem Vorfahren schneiden den Schatten weg, weil ein Schatten außerhalb der Box des Elements gezeichnet wird.
Frequently Asked Questions
Wie wendet man box-shadow in CSS an?
Ergänzen Sie an einem beliebigen Element box-shadow: offset-x offset-y blur-radius color. Beispiel: box-shadow: 0 4px 12px rgba(0,0,0,0.15) erzeugt einen weichen Schlagschatten. Nutzen Sie den Builder, um die Regler anzupassen und die exakte CSS-Eigenschaft zu kopieren – ganz ohne die Syntax auswendig zu lernen.
Wie erstellt man einen box-shadow in CSS?
Die Syntax lautet: box-shadow: offset-x offset-y blur-radius spread-radius color. Ein positiver vertikaler Versatz wirft den Schatten unter das Element, ein negativer darüber. blur-radius steuert die Weichheit (0 = harte Kante). Das Schlüsselwort "inset" vor den Versätzen erzeugt einen Innenschatten.
Kann ich mehrere box-shadow-Werte übereinanderlegen?
Ja – trennen Sie mehrere box-shadow-Werte durch Kommata: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08). Schatten werden von vorn nach hinten gezeichnet (der erste liegt obenauf). Einen kleinen scharfen Schatten mit einem großen diffusen zu kombinieren erzeugt realistische Materialtiefe.
How to Use CSS Box-Shadow Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.