Aufgabenpfad / von der Eingabe zum Ergebnis
So baust du einen CSS-Box-Schatten
- 01
Positioniere den Schatten
Setze Horizontaler Versatz und Vertikaler Versatz, jeweils von -80 bis 80 px. Negative Werte schieben den Schatten nach links oder oben; null zentriert ihn hinter der Karte. Der Arbeitsbereich öffnet mit 12 px nach rechts und 18 px nach unten, einer klassischen Schlagschatten-Platzierung.
- 02
Stimme Weichzeichnung und Ausbreitung ab
Passe Weichzeichnungsradius von 0 bis 120 px für die Weichheit an — der Standard ist 32 px — und Ausbreitungsradius von -40 bis 60 px, um den Schatten vor dem Weichzeichnen wachsen oder schrumpfen zu lassen. Die Standard-Ausbreitung von -4 px zieht den Schatten leicht zusammen für eine schärfere Kante.
- 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.