Box-shadow-Generator

Stelle Versatz, Unschärfe, Ausdehnung, Farbe und Deckkraft mit Reglern ein und beobachte, wie sich eine Vorschau-Box in Echtzeit anpasst. Das generierte CSS aktualisiert sich beim Ziehen und lässt sich direkt ins Stylesheet kopieren.

Werden meine Daten irgendwohin hochgeladen?

Nein, alles läuft im Browser. Es gibt also nichts hochzuladen, und niemand verfolgt mit, was du gerade baust.

Was steuern Versatz, Unschärfe und Ausdehnung genau?

Horizontaler und vertikaler Versatz verschieben den Schatten von der Box weg: positive Werte schieben ihn nach rechts und unten, negative nach links und oben. Die Unschärfe bestimmt, wie weich die Kante des Schattens wirkt, von einer scharfen Silhouette bei null bis zu einem diffusen Glühen bei höheren Werten. Die Ausdehnung vergrößert oder verkleinert die Form des Schattens, bevor die Unschärfe angewendet wird: Ein positiver Wert macht den Schatten auf allen Seiten größer als die Box, ein negativer zieht ihn kleiner zusammen. Farbe und Deckkraft spielen zusammen: Du wählst eine Hex-Farbe, und der Deckkraft-Regler bestimmt, wie kräftig oder blass sie wirkt, was das Tool intern in einen Standard-rgba()-Wert umrechnet. Der Inset-Schalter kippt den Schatten von außerhalb der Box-Kante nach innen, das ergibt einen eingedrückten oder ausgehöhlten statt eines erhabenen Effekts.

Wie funktionieren mehrere Schattenebenen?

Füge mehrere Ebenen hinzu, um Schatten zu stapeln, wie CSS es erlaubt; im fertigen box-shadow-Wert werden sie durch Kommas getrennt. Ein gängiges Muster ist ein enger, dunkler Schatten mit geringer Deckkraft dicht an der Box, kombiniert mit einem weicheren, breiteren und helleren weiter außen, das wirkt natürlicher als ein einzelner Schatten. Die Ebenen erscheinen in der Reihenfolge, in der du sie hinzufügst, wobei die erste Ebene oben liegt, genau wie der Browser durch Kommas getrennte box-shadow-Werte rendert. Inset- und Nicht-Inset-Ebenen lassen sich im selben Stapel mischen, praktisch für eine Karte, die gleichzeitig einen dezenten äußeren Schatten und einen leichten inneren Glanz braucht.

Typische Anwendungen: Karten und Buttons mit Tiefenwirkung, neumorphe oder Inset-Effekte, oder einfach den richtigen Schatten finden, ohne Pixelwerte zu erraten. Die vollständige Syntax und Browser-Unterstützung findest du in der MDN-Referenz zu box-shadow, und MDNs Leitfaden zu CSS-Farben erklärt, wie die rgba()-Werte im generierten CSS funktionieren.