CSS-Box-Shadow-Generator

Erstelle mehrschichtige CSS-Box-Shadow-Werte mit Live-Vorschau, Inset-Option und präziser Steuerung.

Ebenen1
Erstelle mehrschichtige CSS-Box-Shadow-Werte mit Live-Vorschau, Inset-Option und präziser Steuerung.
Einstellungen der Ebene
Ebene 1
px
px
px
px
Vorschau
Kopiere den box-shadow-Wert in dein CSS.
box-shadow
CSS-Ausgabe
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);

Was ist box-shadow?

Erstelle mehrschichtige CSS-Box-Shadow-Werte mit Live-Vorschau, Inset-Option und präziser Steuerung.

box-shadow ist eine CSS-Eigenschaft, die einen oder mehrere Schatten hinter (oder innerhalb) eines Elements zeichnet.

Jeder Schatten nutzt horizontale und vertikale Versätze, einen Unschärferadius, eine optionale Ausbreitung und eine Farbe mit Alpha; fügen Sie inset hinzu, um einen Innenschatten zu erzeugen.

Mehrere Ebenen werden durch Kommas getrennt und lassen sich stapeln, um Tiefe, Glühen oder scharfe Kanten zu erzeugen.

  • Kleine Versätze mit größerer Unschärfe wirken wie sanfte Höhe.
  • Höhere Deckkraft mit wenig Unschärfe ergibt schärfere Kanten.
  • Kombinieren Sie Außen- und Innenschatten für mehr Tiefe.
  • Begrenzen Sie die Anzahl der Ebenen für bessere Performance.