CSS box-shadow mit Schiebereglern erstellen und auf einem Live-Element voranzeigen
Ein Box-Shadow-Generator lässt Sie einen CSS-Schatten mit Reglern und einer Live-Vorschau gestalten und dann den exakten box-shadow-Wert in Ihr Stylesheet kopieren. CSS-Schatten werden von einer Handvoll Zahlen gesteuert — horizontaler und vertikaler Versatz, Weichzeichnungsradius, Ausbreitung und eine Farbe — und ihre Beziehung ist allein aus dem Code schwer vorstellbar. Einen Regler zu ziehen und den Schatten auf einem Beispielelement zu beobachten ist weit schneller, als Zahlen blind zu bearbeiten und für das Ergebnis neu zu laden.
Gute Schatten geben einer flachen Oberfläche Tiefe und Hierarchie: ein dezenter, weicher Schatten hebt eine Karte von der Seite ab, während ein engerer, dunklerer einen drückbaren Button andeutet. Der Trick, den die meisten übersehen: Realistische Tiefe kommt aus weichen Schatten mit geringer Deckkraft statt schweren schwarzen — und der Generator macht es leicht, diese Weichheit nach Augenmaß einzustellen. Er unterstützt auch Inset-Schatten für innere Tiefe. Dieses Tool erzeugt standardbasiertes CSS im Browser, bereit für Buttons, Karten, Modals und Eingabefelder.
Der Reihe nach: horizontaler Versatz, vertikaler Versatz, Weichzeichnungsradius, Ausbreitungsradius und Farbe. Versätze bewegen den Schatten, Weichzeichnung mildert seine Kante, Ausbreitung vergrößert oder verkleinert ihn, und die Farbe (meist mit geringer Deckkraft) setzt seine Stärke. Ein optionales „inset" zeichnet den Schatten innen.
Nutzen Sie eine weiche Weichzeichnung und eine Farbe mit geringer Deckkraft statt Vollschwarz, und halten Sie den vertikalen Versatz größer als den horizontalen, um Licht von oben zu imitieren. Dezente, weiche Schatten lesen sich als natürliche Tiefe; schwere dunkle wirken künstlich.
Das Schlüsselwort inset zeichnet den Schatten innen statt außen und schafft einen inneren, vertieften Eindruck — nützlich für gedrückte Buttons, Eingabefelder oder eingravierte Effekte. Dieselben Versatz-, Weichzeichnungs- und Ausbreitungswerte gelten, nur nach innen gerichtet.
Ja. CSS lässt Sie mehrere box-shadows auf einem Element stapeln, durch Kommas getrennt — so wird realistische Tiefe oft gebaut, indem ein enger, dunklerer Schatten mit einem breiteren, weicheren kombiniert wird. Der erzeugte Wert kann mehrere Ebenen halten.
Border-Radius-Generator · Flexbox-Generator · CSS-Grid-Generator · Text-Shadow-Generator · CSS-Animations-Generator · CSS-Filter-Generator