box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.25);
Was es tut
Entwirft mehrschichtige CSS-box-shadow-Werte mit Live-Vorschau und kopierfertiger Ausgabe. Jede Schicht hat die fünf Standardeigenschaften - Offset X, Offset Y, Blur, Spread, Farbe - plus einen Inset-Schalter und einen 0-1-Opacity-Schieberegler, dessen Wert beim Erzeugen in eine rgba()-Farbe eingebaut wird. Staple so viele Schichten, wie du brauchst; sie werden in Ausgabereihenfolge mit Kommas verbunden, genau wie CSS es erwartet.
Fünf Ein-Klick-Presets (Soft, Sharp, Elevated, Inner, Glow) ersetzen die aktuellen Schichten durch bewährte Kombinationen - einlagige Defaults plus ein zweischichtiger “Elevated”-Stapel. Die Vorschaubühne rendert deinen Schatten auf einer abgerundeten Box, deren Farbe du steuerst, vor deiner Wahl aus schlichtem, Schachbrett- oder geteiltem Hintergrund, um die Deckkraft zu beurteilen. 100 % clientseitig.
So verwendest du es
- Klicke in der Werkzeugleiste auf ein Preset, um von einem bekannten, funktionierenden Schatten zu starten, oder bearbeite die anfängliche Soft-Schicht direkt. Reset stellt die einzelne Standard-Soft-Schicht wieder her.
- Wähle in Stage den Vorschau-Backdrop (Plain / Checker / Split) und setze die Box-Farbe mit dem Farbwähler.
- Passe in jedem Layer-Abschnitt die Regler an:
- Inset - zeichnet den Schatten innerhalb der Box statt außerhalb.
- Color - die Grundfarbe der Schicht (Farbwähler, Hex).
- Offset X / Offset Y - Position in Pixeln; negative Werte sind erlaubt.
- Blur - Unschärferadius in Pixeln (mindestens 0).
- Spread - weitet oder verengt den Schatten; negative Werte ziehen ihn zusammen.
- Opacity - 0-1-Schieberegler, in die ausgegebene
rgba()-Farbe eingemischt.
- Klicke auf Add layer, um einen weiteren Schatten zu stapeln (z. B. einen engen Kontaktschatten unter einem weiten Umgebungsstapel). Entferne Schichten mit dem Papierkorb-Knopf an jedem Abschnitt - die letzte Schicht lässt sich nicht entfernen.
- Beobachte, wie sich die Live-Vorschau beim Bearbeiten aktualisiert.
- Klicke auf Copy bei der CSS-Ausgabe, um die fertige Deklaration zu übernehmen.
Beispiele
Verifiziert durch den Aufruf von buildBoxShadow() aus src/lib/boxShadow.ts mit exakt den Schichtwerten, die die fünf Presets einsetzen:
Soft (auch der Anfangszustand des Tools)
box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.25);Elevated - zwei Schichten, enger Kontakt + weite Umgebung:
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1), 0px 12px 28px -6px rgba(0,0,0,0.28);Inner
box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.35);Glow - farbiger Schatten ohne Offset:
box-shadow: 0px 0px 24px 2px rgba(59,130,246,0.45);Sharp: box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3);
Gut zu wissen
- Privat: das Erzeugen läuft lokal; nichts wird hochgeladen.
- Schichten werden kommagetrennt in Listenreihenfolge ausgegeben - die erste Schicht liegt in CSS oben, die Reihenfolge ist also visuell relevant.
- Die Deckkraft wird pro Schicht über
rgba()angewandt, sodass du in einer Deklaration einen kräftigen schwarzen Kontaktschatten mit einem schwachen farbigen Glow kombinieren kannst. - Der Split-Backdrop zeigt deinen Schatten gleichzeitig auf einer hellen und einer dunklen Hälfte - der schnellste Weg, einen Schatten zu prüfen, der in beiden Themes funktionieren muss.
- Negativer Spread (
-4px,-6pxin den Presets) hält eine große Unschärfe davon ab, über die Boxkanten hinauszulaufen. - Verwandte Tools: CSS Gradient Generator, Glassmorphism Generator, Color Picker & Converter