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.
Bitte Adblocker deaktivieren
Diese Werkzeuge sind komplett kostenlos und werden ausschließlich über Werbung finanziert. Mit aktivem Adblocker stehen die Tools leider nicht zur Verfügung.
2. Diese Seite neu laden
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.