Zum Inhalt springen
Ad: top-banner (320x50)

CSS-Box-Shadow-Generator

Erstelle mehrlagige CSS-Box-Shadows mit Live-Vorschau und direkt kopierbarem Code

Ihre Daten verlassen niemals Ihr Gerät
Vorschau
Vorlagen
CSS-Ausgabe
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
Ebenen (1/8)
Bearbeite Ebene 1
X-Versatz0px
Y-Versatz4px
Blur12px
Spread0px
Farbe
Deckkraft25%
Ad: sidebar (300x250)
Ad: mid-banner (300x250)

Häufig gestellte Fragen

  • Kann ich mehrere Schatten stapeln?

    Ja. Du kannst bis zu 8 Schatten-Ebenen hinzufügen — sie werden in Reihenfolge gerendert (erste Ebene oben). So entstehen Tiefen- und Neumorphismus-Effekte, etwa mit einem dunklen Schatten unten rechts über einem helleren Schatten oben links.

  • Was ist der Unterschied zwischen Blur und Spread?

    Blur weicht die Schattenkante auf (höher = diffuser). Spread vergrößert oder verkleinert den Schatten gleichmäßig vor dem Weichzeichnen (positiv = größer, negativ = kleiner als das Element).

  • Was bewirkt Inset?

    Inset rendert den Schatten innerhalb des Elements statt außerhalb — nützlich für innere Glows, Press-Down-Effekte und eingelassene Button-Looks.

  • Funktioniert das in allen Browsern?

    Ja. box-shadow ist CSS3 und wird in jedem Browser ab IE9 aufwärts unterstützt, auch mobil.