🌫️

CSS Box Shadow Generator

CSS box-shadow-Werte visuell erstellen. Versatz, Weichzeichnung, Ausbreitung, Farbe und Deckkraft in einer Live-Vorschau anpassen. Mehrere Ebenen stapeln und das endgültige CSS kopieren.

Generator-Tools Läuft lokal Keine Daten gesendet
cssbox-shadowGeneratorDesign
Ebenen
X-Versatz4px
Y-Versatz4px
Weichzeichnen8px
Ausbreitung0px
%
Inset

Was ist der CSS Box Shadow Generator?

Mit dem CSS Box Shadow Generator können Sie box-shadow-Werte visuell erstellen und das CSS sofort kopieren. Passen Sie Versatz, Weichzeichnen, Ausbreitung, Farbe und Deckkraft mit Live-Vorschau an.

So verwenden Sie den Box Shadow Generator

  1. Passen Sie die Regler für X/Y-Versatz, Weichzeichnen und Ausbreitung an.
  2. Wählen Sie eine Schattenfarbe und legen Sie die Deckkraft fest.
  3. Aktivieren Sie Inset für einen inneren Schatteneffekt.
  4. Fügen Sie weitere Ebenen für komplexe Schatten hinzu.
  5. Kopieren Sie das CSS und fügen Sie es in Ihr Projekt ein.

Verwandte Tools

🌈
CSS Gradient Generator
Lineare und radiale CSS-Verläufe erstellen
🖌️
Farbe wählen
Farben auswählen und zwischen Formaten konvertieren
🎨
CSS-Formatierer
CSS-Code formatieren und verschönern
Mehr erfahren▾
Box-Shadow-Parameter
  • X/Y-Versatz —verschiebt den Schatten horizontal und vertikal
  • Weichzeichnen —wie weich/unscharf die Schattenkante ist
  • Ausbreitung —vergrößert oder verkleinert die Schattengröße
  • Inset —zeichnet den Schatten innerhalb des Elements
Häufig gestellte Fragen
Kann ich mehrere Schatten hinzufügen?

Ja. Klicken Sie auf „Ebene hinzufügen“, um mehrere box-shadow-Werte zu stapeln; im Ausgabe-CSS werden sie durch Kommas kombiniert.

Wie verwende ich das generierte CSS?

Klicken Sie auf „CSS kopieren“ und fügen Sie die box-shadow-Eigenschaft direkt in Ihre CSS-Datei oder Ihren Style-Block ein.