Soft CSS Box Shadow – vorgefertigter Code
Erstellen Sie visuell CSS-Box-Shadow-Code: Schieberegler für Versatz, Unschärfe, Ausbreitung, Farbe mit Deckkraft, Einfügungsmodus und bis zu vier Ebenen mit Live-Vorschau.
Ergebnis
Auf dieser Seite wird der Box-Shadow-Generator geöffnet, der mit einem weichen Schatten vorinstalliert ist: kein horizontaler Versatz, 8 Pixel nach unten, eine großzügige 24 Pixel-Unschärfe und eine niedrige Schwarzdeckkraft von 12 %. Die Vorschaukarte rendert es sofort – bewegen Sie einen beliebigen Schieberegler und die CSS-Zeile folgt in Echtzeit.
Weiche Schatten sind das Arbeitstier moderner Benutzeroberflächen. Eine große Unschärfe gepaart mit geringer Deckkraft hebt eine Karte von der Seite ab, ohne einen harten Umriss zu zeichnen, weshalb die meisten Designsysteme ihre Höhenschatten genau in diesem Bereich belassen, anstatt in den dichten, dunklen Schatten des frühen flachen Designs.
Kopieren Sie die Box-Schatten-Linie direkt in Ihr Stylesheet oder stapeln Sie bis zu drei weitere Ebenen für eine reichhaltigere Darstellung. Der Generator läuft vollständig in Ihrem Browser – es wird nichts irgendwo hochgeladen.