CSS-Schatten bauen und als CSS kopieren.
Stelle Versatz, Weichzeichnung, Spread, Farbe und Deckkraft ein und sieh den Schatten sofort in der Live-Vorschau. Auch Innenschatten (inset) sind möglich. Das fertige box-shadow-CSS gibt es mit einem Klick zum Kopieren — alles läuft im Browser.
1 Versatz & Form
2 Farbe & Deckkraft
CSS box-shadow: Schatten für jedes Element
Die CSS-Eigenschaft box-shadow legt einen oder mehrere Schatten hinter (oder mit inset in) ein Element. Ein Schatten besteht aus horizontalem und vertikalem Versatz, einer Weichzeichnung (Blur), einer optionalen Spread-Größe und einer Farbe. Dieses Werkzeug stellt alle Werte visuell ein und erzeugt das passende CSS. Es wird nichts hochgeladen — alles entsteht lokal im Browser.
Häufige Fragen
Wie binde ich den Schatten ein?
Kopiere die erzeugte Zeile und setze sie auf dein Element, z. B. .card{ box-shadow: 0 10px 20px 0 rgba(26,32,48,.25); }.
Was macht „inset"?
Mit inset liegt der Schatten innerhalb des Elements statt außen — ideal für vertiefte Flächen oder eingedrückte Felder.
Wird etwas hochgeladen?
Nein. Der Schatten und das CSS entstehen komplett lokal in deinem Browser.