Aufgabenpfad / von der Eingabe zum Ergebnis
So baust du einen CSS-Box-Schatten
- 01
Positioniere den Schatten
1–8 Schattenebenen · X/Y (px): −100…100 · Unschärfe (px): 0–100 · Ausdehnung (px): −100…100 · Farbe · Deckkraft: 0–1 · inset
- 02
Stimme Weichzeichnung und Ausbreitung ab
Ein bis acht Schattenebenen mit eigenem Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und inset.
- 03
Lege Farbe und Deckkraft fest
Wähle eine sechsstellige Schattenfarbe — der Standard #0b0d12 ist fast schwarz — und setze Schattendeckkraft von 0 bis 1 in Schritten von 0,01. Die Deckkraft wird der Alpha-Kanal der rgba()-Farbe in der Ausgabe, 0,28 rendert also als rgba(11, 13, 18, 0.28).
- 04
Schalte den Inset-Modus um
Aktiviere Inset-Schatten, um den Schatten in die Box zu verlegen, was sich als eingedrückte oder vertiefte Fläche liest — nützlich für Eingabefelder und umgeschaltete Buttons. Die generierte Deklaration stellt das Schlüsselwort inset voran, wenn der Schalter an ist.
- 05
Vergleiche mit dem Beispiel
Drücke Beispiel laden für einen scharfen Referenzstil: 8 px Versatz auf beiden Achsen ohne Weichzeichnung und ohne Ausbreitung in #0f4cff bei 0,35 Deckkraft — eine hartkantige versetzte Kontur. Zurücksetzen holt den weichen Standardschatten zurück, und die Live-Vorschau rendert bei jeder Änderung neu.
- 06
Kopiere oder lade das CSS herunter
Drücke CSS kopieren, um die .shadow-card-Regel zu kopieren, oder .css herunterladen, um sie als toolars-box-shadow.css zu speichern. Kopieren ist blockiert, solange ein Wert außerhalb des Bereichs liegt — die Deklaration, die du einfügst, validiert also immer. HTML enthält das aktuelle CSS und ein funktionierendes Beispiel. Native Steuerelemente unterstützen Tastatureingaben.