Über dieses Tool
Die box-shadow-Eigenschaft ist tiefer, als sie scheint: Versatz, Unschärfe, Ausbreitung, Farbe und das Schlüsselwort inset wirken zusammen, und echte Tiefe entsteht meist durch das Stapeln mehrerer Schatten. Dieser Generator bietet einen Regler für jeden Wert und erlaubt mehrere Ebenen, sodass Sie von einem dezenten Karten-Lift bis zu einem kräftigen neumorphen Effekt alles bauen können.
Alles aktualisiert sich in einer Live-Vorschau, und das fertige box-shadow-CSS ist nur einen Kopiervorgang entfernt. Läuft vollständig im Browser.
Häufige Fragen
Unterstützt es mehrere gestapelte Schatten?
Ja. Klicken Sie auf 'Add Layer', um weitere Schatten zu stapeln — sie werden zu einem einzigen, kommagetrennten box-shadow-Wert zusammengefasst, wobei die erste Ebene oben liegt.
Was bewirkt das Kontrollkästchen 'inset'?
Es wandelt diese Ebene von einem äußeren Schlagschatten in einen inneren Schatten um, der innerhalb des Elementrands erscheint — nützlich für gedrückt wirkende oder vertiefte Effekte.
Wie wird die Transparenz des Schattens gehandhabt?
Der Deckkraft-Regler wird mit der Farbauswahl zu einer 8-stelligen Hex-Farbe (#rrggbbaa) kombiniert, sodass echte Alpha-Transparenz entsteht — die Farbeingabe allein kann keinen Alphakanal speichern.
Werden meine Design-Daten irgendwohin hochgeladen?
Nein, die Schattenvorschau und die CSS-Ausgabe werden vollständig in Ihrem Browser erzeugt — nichts wird hochgeladen oder auf einem Server gespeichert.
Was bewirkt ein negativer Spread-Wert?
Ein negativer Spread verkleinert die Form des Schattens vor der Weichzeichnung, was oft genutzt wird, damit der Schatten dünner oder enger wirkt als das Element selbst.