CSS-Schatten-Generator
Erstelle CSS box-shadow visuell mit Live-Vorschau. Passe Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft an. Kopiere den CSS-Code. Kostenlos, 100% im Browser.
Vorschau
CSS-Code
Referenz
Was ist CSS box-shadow?
Die CSS-Eigenschaft box-shadow fügt einem Element einen oder mehrere Schatteneffekte hinzu. Sie wird durch Versätze relativ zum Element, Unschärfe- und Ausbreitungsradien, Farbe und ein optionales inset-Schlüsselwort definiert. Mehrere Schatten werden durch Kommas getrennt und von vorne nach hinten gerendert.
box-shadow Syntax
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
offset-x: Horizontaler Abstand. Positiv = rechts, negativ = links.
offset-y: Vertikaler Abstand. Positiv = unten, negativ = oben.
blur-radius (optional, Standard 0): Größere Werte erzeugen einen weicheren, diffuseren Schatten.
spread-radius (optional, Standard 0): Positive Werte erweitern den Schatten, negative verkleinern ihn.
inset (optional): Verschiebt den Schatten ins Innere des Elements.
Mehrere Schattenebenen verwenden
Die Kombination mehrerer Schatten erzeugt realistische Tiefeneffekte. Eine gängige Technik ist es, einen engen, dunklen Schatten nah am Element (für Definition) mit einem großen, schwachen Schatten weiter entfernt (für Tiefe) zu kombinieren. Material Design und moderne Designsysteme verwenden geschichtete Schatten zur Kommunikation von Elevation.
Design-Tipps für Schatten
Verwende rgba()- oder hsla()-Farben — halbtransparente Schatten sehen natürlicher aus als deckende.
Halte die Lichtquelle konsistent — verwende die gleiche Versatzrichtung in deiner gesamten Oberfläche.
Vermeide reines Schwarz — nutze einen dunklen Ton deiner Markenfarbe für weichere, zusammenhängendere Schatten.
Leistung — box-shadow löst Paint-Operationen aus. Für animierte Elemente bevorzuge filter: drop-shadow().
Datenschutz
Die gesamte Schattengenerierung läuft zu 100% in deinem Browser. Es werden keine Daten an einen Server gesendet.