CSS Box-Shadow visuell einstellen
Der Box-Shadow Generator hilft dabei, CSS-Schatten nicht blind auswendig zu schreiben, sondern direkt sichtbar zu formen. Das Werkzeug erzeugt die vollständige box-shadow-Deklaration aus einzelnen Ebenen. Für jede Ebene werden horizontale Verschiebung, vertikale Verschiebung, Weichzeichnung, Spread, Farbe, Deckkraft und optional inset gesteuert. Während du die Regler bewegst, aktualisiert sich die Vorschau sofort und der CSS-Code kann kopiert werden.
Der praktische Vorteil liegt in der Kontrolle über mehrere Schattenlagen. Ein einzelner harter Schatten wirkt oft flach oder unruhig. Zwei oder drei Ebenen können natürlicher aussehen: eine kurze dunklere Lage für Kontakt zum Hintergrund, dazu eine größere weichere Lage für Tiefe. Die Seite unterstützt Presets wie subtil, mittel, stark und inner, lässt aber jede Ebene nachträglich anpassen. Der Hintergrund der Vorschau kann ebenfalls geändert werden, damit du siehst, ob der Schatten auf hellen, grauen oder farbigen Flächen noch glaubwürdig wirkt.
Was die Werte bedeuten
Der X-Wert verschiebt den Schatten nach rechts oder links, der Y-Wert nach unten oder oben. Blur steuert, wie weich die Kante ausläuft. Spread vergrößert oder verkleinert die Schattenfläche, bevor sie weichgezeichnet wird. Die Deckkraft wird im Generator in Prozent geführt und im CSS als RGBA-Wert ausgegeben. Bei inset liegt der Schatten innen; das passt zu eingedrückten Feldern, inneren Kanten oder kleinen UI-Details, sollte aber sparsam verwendet werden.
Für Weboberflächen sind Schatten am überzeugendsten, wenn sie eine klare Aufgabe haben. Karten, Menüs und Modals brauchen oft nur wenig Tiefe, während schwebende Aktionsflächen etwas stärker sein dürfen. Sehr dunkle oder weit gestreute Schatten können auf modernen Interfaces schnell alt wirken und Layouts visuell schwer machen. Achte außerdem darauf, dass Schatten nicht als einziger Zustandsindikator dienen, weil sie bei kontrastarmen Displays oder dunklen Themes verloren gehen können. Für produktiven Code solltest du die generierte Deklaration in Design-Tokens oder CSS-Variablen überführen, damit wiederkehrende Elevation-Stufen konsistent bleiben. Der Generator liefert den genauen CSS-Ausdruck, die gestalterische Entscheidung entsteht aber erst im Zusammenspiel mit Fläche, Abstand, Radius und Hintergrund.
Wenn du den generierten Schatten in ein Projekt übernimmst, teste ihn nicht nur auf der Beispielkarte. Setze ihn auf ein echtes Element mit Radius, Inhalt und Abstand zu Nachbarelementen. Ein Shadow, der allein gut aussieht, kann in einer Liste zu stark wirken oder bei dunklen Themes fast verschwinden. Speichere gelungene Werte als wiederverwendbare Stufen wie shadow-sm, shadow-md und shadow-lg, damit die Oberfläche nicht aus zufälligen Einzelwerten besteht.
Mehrere dezente Schattenebenen wirken oft natuerlicher als ein einzelner sehr starker Schatten mit grossem Blur.
Kommentare