Wie man einen CSS Box Shadow erstellt (mit Live-Vorschau)
Veröffentlicht am 14. September 2026 · 2 Min. Lesezeit
Den Versatz, die Unschärfe, die Ausbreitung und die Farbe eines box-shadow richtig hinzubekommen, bedeutet normalerweise, CSS wiederholt zu bearbeiten und einen Browser-Tab zu aktualisieren. Dieses Tool gibt Ihnen Schieberegler und eine Live-Vorschau, sodass Sie den genauen Effekt sehen können, bevor Sie das CSS kopieren.
CSS-Box-Shadow-Generator ausprobierenSchritte
- 1
Öffnen Sie den CSS Box Shadow Generator
Gehen Sie zum box-shadow-Generator.
- 2
Wählen Sie eine Voreinstellung oder beginnen Sie individuell
Wählen Sie eine Tailwind-artige Voreinstellung, oder stellen Sie Ihren eigenen Versatz, Unschärfe, Ausbreitung und Farbe ein.
- 3
Fügen Sie eine zweite Schattenebene hinzu (optional)
Schichten Sie einen zweiten Schatten für mehr Tiefe, wie es Designsysteme oft verwenden.
- 4
Kopieren Sie das CSS
Fügen Sie die generierte box-shadow-Regel direkt in Ihr Stylesheet ein.
Häufig gestellte Fragen
Ja — schalten Sie den Inset-Modus um, um einen Schatten zu erhalten, der innerhalb der Elementgrenze statt außerhalb erscheint.
Ja — aktivieren Sie eine zweite Schattenebene für einen nuancierteren, geschichteten Tiefeneffekt, eine gängige Technik in modernen Designsystemen.
Ja — die Vorschau rendert die tatsächliche CSS-box-shadow-Eigenschaft, sodass das, was Sie sehen, genau das ist, was Sie beim Einfügen des Codes erhalten.
Da sich die Vorschau live aktualisiert, während Sie jeden Regler anpassen, können Sie einen Schatten genau richtig einstellen, bevor Sie überhaupt Ihr Stylesheet berühren.