CSS Box Shadow Generator
Erstelle perfekte Schatten für deine Elemente und kopiere den CSS-Code.
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
Perfekte Schatten für deine Elemente
Box-Shadows verleihen Elementen Tiefe und Dimension. Mit diesem visuellen Generator passt du alle Parameter an – Offset, Blur, Spread, Farbe und Inset – und siehst das Ergebnis in Echtzeit.
Box-Shadow Parameter erklärt
Ein Box-Shadow hat bis zu 6 Parameter: horizontaler Offset, vertikaler Offset, Blur-Radius, Spread-Radius, Farbe und optional "inset" für innere Schatten.
Schatten im modernen Webdesign
Subtile Schatten (Soft Shadows) sind ein Kennzeichen modernen Designs. Sie heben Elemente hervor, ohne aufdringlich zu wirken. Weniger ist oft mehr.
Performance-Hinweis
Box-Shadows können bei vielen Elementen die Performance beeinträchtigen. Verwende will-change: transform auf animierten Elementen und vermeide extrem große Blur-Werte.
Häufig gestellte Fragen
Was bedeuten die Box-Shadow Werte?
box-shadow: X Y blur spread farbe; X = horizontaler Versatz, Y = vertikaler Versatz, blur = Unschärfe, spread = Größe, z.B.: box-shadow: 5px 10px 15px rgba(0,0,0,0.2);
Wie erstelle ich einen inneren Schatten?
Mit dem Keyword "inset" am Anfang: box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); Das erzeugt einen Schatten innerhalb des Elements.
Kann ich mehrere Schatten kombinieren?
Ja, durch Komma getrennt: box-shadow: 0 5px 15px rgba(0,0,0,0.1), 0 2px 5px rgba(0,0,0,0.1); Das erzeugt mehrschichtige, realistischere Schatten.
Was ist der Unterschied zwischen blur und spread?
Blur macht den Schatten weicher/unschärfer. Spread vergrößert oder verkleinert den Schatten. Ein negativer Spread macht ihn kleiner als das Element.
Du willst ein professionelles Webdesign mit Liebe zum Detail? Ich gestalte Websites die modern aussehen und perfekt funktionieren.
Weiterlesen im Blog
CSS-Feintuning ist nicht dein Tagesgeschäft?
Ich übernehme Design & Code komplett: moderne, schnelle Websites mit sauberem CSS — ab 1.500 €, fertig in 2–6 Wochen.