CSS Box Shadow Generator

Was ist ein CSS-Box-Shadow-Generator?

Ein CSS-Box-Shadow-Generator erstellt visuell den CSS-Code fuer Schatteneffekte auf HTML-Elementen. Schatten verleihen Elementen Tiefe und erzeugen den Eindruck von Ebenen im Flat-Design.

Die CSS-box-shadow-Eigenschaft akzeptiert mehrere Parameter: horizontalen Versatz, vertikalen Versatz, Weichzeichnerradius, Ausbreitungsradius, Farbe und einen optionalen inset-Wert fuer innere Schatten.

Box-Shadow-Syntax

Format: box-shadow: h-offset v-offset blur spread color. Zum Beispiel: box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1) erstellt einen subtilen Schlagschatten nach unten. Mehrere Schatten werden durch Kommas getrennt.

So verwenden Sie dieses Tool

Passen Sie die Schieberegler fuer jeden Parameter an und sehen Sie den Effekt in Echtzeit auf dem Vorschauelement. Fuegen Sie mehrere Schattenschichten hinzu fuer komplexere Effekte und kopieren Sie den fertigen CSS-Code.

Design-Tipps fuer Schatten

• Verwenden Sie subtile Schatten — grosse Schatten wirken amateurhaft. Beginnen Sie mit kleinen Werten wie 0 2px 4px rgba(0,0,0,0.1).
• Konsistente Lichtrichtung — alle Schatten auf einer Seite sollten in die gleiche Richtung fallen (typisch: leicht nach unten).
• Verwenden Sie RGBA oder HSLA fuer Schattenfarben, damit sie sich an jeden Hintergrund anpassen. Schwarz mit niedriger Deckkraft ist universell.
• Schichten Sie mehrere Schatten fuer natuerlichere Tiefe — einen diffusen Schatten und einen engeren, dunkleren Schatten.
• Inset-Schatten eignen sich hervorragend fuer eingepresste Eingabefelder, Statusanzeigen und Neumorphismus-Designs.

Material-Design-Ebenen

Google Material Design definiert 5 Tiefenstufen von 0 bis 24. Jede Stufe verwendet zwei oder drei Schattenebenen mit verschiedenen Deckkraftwerten. Hoehere Elemente haben weichere, grossflaechigere Schatten.

Leistung von Schatten

Box-Shadow kann die Rendering-Leistung beeintraechtigen, besonders bei Animationen und grossen Weichzeichnerradien. Verwenden Sie filter: drop-shadow() als leistungsfaehigere Alternative oder will-change: box-shadow fuer animierte Schatten.

Haeufig gestellte Fragen

Was ist der Unterschied zwischen box-shadow und drop-shadow?

box-shadow folgt der Box des Elements (Rechteck). filter: drop-shadow() folgt der tatsaechlichen Form einschliesslich Transparenz (z.B. Schatten um ein PNG mit transparentem Hintergrund). drop-shadow unterstuetzt kein inset oder spread.

Kann ich text-shadow und box-shadow kombinieren?

Ja, sie sind unabhaengige Eigenschaften. text-shadow betrifft den Text innerhalb eines Elements, waehrend box-shadow die gesamte Box betrifft. Verwenden Sie text-shadow sparsam — es kann die Lesbarkeit beeintraechtigen.