DevToolPal
DE

CSS-Box-Shadow-Generator

CSS-Schatten visuell gestalten: mehrere Ebenen stapeln, Versatz, Unschärfe, Ausdehnung, Farbe und inset einstellen, mit Live-Vorschau, Vorlagen und fertigem CSS zum Kopieren.

Läuft lokal, wird nie hochgeladen

Schattenebenen

Kein Schatten. Fügen Sie eine Ebene hinzu oder wählen Sie eine Vorlage.

Vorschau

Boxfarbe
Hintergrund

CSS

Vorlagen
Box-Shadow-CSS
 
 
 
 
 
Was das Tool macht


Mit dem Box-Shadow-Generator gestalten Sie CSS-Schatten nach Augenmaß und kopieren die fertige box-shadow-Deklaration. Stapeln Sie so viele Ebenen wie nötig, stellen Sie für jede Versatz, Unschärfe, Ausdehnung, Farbe und Deckkraft ein, machen Sie daraus einen Innenschatten – die Vorschau aktualisiert sich sofort. Sie können auch einen vorhandenen box-shadow-Wert einfügen und visuell bearbeiten. Alles läuft in Ihrem Browser.


So funktioniert es


    

  1. Starten Sie mit einer Vorlage oder behalten Sie den Beispielschatten.
    2. 

  2. Wählen Sie eine Ebene über die Schaltflächen Ebene oder stapeln Sie mit + Ebene hinzufügen eine weitere darüber.
    3. 

  3. Ziehen Sie Horizontaler Versatz, Vertikaler Versatz, Unschärfe und Ausdehnung, wählen Sie eine Farbe und senken Sie die Deckkraft für einen weicheren Look. Mit Innen entsteht ein Innenschatten.
    4. 

  4. Passen Sie Boxfarbe, Hintergrund und Eckenradius der Vorschau an Ihre Seite an. Sie wirken nur auf die Vorschau.
    5. 

  5. Kopieren Sie den Code aus der Karte CSS.
    6. 



Das Feld Box-Shadow-CSS unten ist editierbar: Fügen Sie einen Schatten aus Ihrem Stylesheet oder Designtool ein, und die Regler übernehmen ihn. Längen in rem oder em werden mit 16px in px umgerechnet.


Beispiel


.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}


Tipps für natürliche Schatten


    

  • Geringe Deckkraft. 5–25 % Schwarz wirkt realistisch; satte dunkle Schatten wirken schwer.
    • 

  • Negative Ausdehnung verhindert, dass eine große Unschärfe seitlich herausquillt – der Trick hinter den meisten „Karten“-Schatten.
    • 

  • Schatten einfärben. Ein Schatten mit etwas Hintergrund- oder Markenfarbe wirkt reicher als reines Grau.
    • 

  • Licht aus einer Richtung. Halten Sie den vertikalen Versatz in allen Ebenen positiv, damit alle Schatten dieselbe Lichtquelle zeigen.
    • 

  • Leistung. Große Unschärfen auf vielen Elementen können das Scrollen auf schwachen Handys bremsen; animieren Sie opacity oder transform statt des Schattens selbst.
    • 

 
  
 
FAQ
 
 
  › Was bedeuten die vier Zahlen in box-shadow?  
Der Reihe nach: horizontaler Versatz, vertikaler Versatz, Unschärferadius und Ausdehnungsradius. Positive Versätze verschieben den Schatten nach rechts und unten. Die Unschärfe macht die Kante weich und darf nicht negativ sein. Die Ausdehnung vergrößert (positiv) oder verkleinert (negativ) den Schatten, bevor die Unschärfe angewendet wird.
 
  › Warum mehrere Schattenebenen?  
Echte Schatten sind nah am Objekt scharf und laufen in der Ferne aus. Zwei oder mehr gestapelte Ebenen, etwa ein kleiner scharfer und ein großer weicher Schatten, wirken viel natürlicher als eine einzige dunkle Unschärfe. So bauen die meisten Designsysteme ihre Höhenstufen.
 
  › Was bewirkt inset?  
inset zeichnet den Schatten innerhalb der Box statt außen, als wäre das Element eingedrückt. Das nutzt man für Eingabefelder, gedrückte Buttons und inneres Leuchten. Innere und äußere Ebenen lassen sich in einem box-shadow mischen.
 
  › Folgt box-shadow dem border-radius?  
Ja. Der Schatten übernimmt die Form des Elements einschließlich abgerundeter Ecken, deshalb nutzt die Vorschau den eingestellten Eckenradius. Transparenten Bereichen eines Bildes folgt er nicht; dafür gibt es den CSS-Filter drop-shadow().