CSS-Box-Shadow-Generator

box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);

Background

Box color

Drop Shadow

Inset

X Offset: 4px

Y Offset: 4px

Blur: 10px

Spread: 0px

Farbe

Zuletzt aktualisiert: 2026 · Kostenloses Online-Tool

Was ist CSS-Box-Shadow-Generator?

Kostenloses Online-Tool mit visuellem Editor zum Erstellen von CSS box-shadow und Kopieren des Codes

1
Vorlage auswählen — Starten Sie schnell mit einer Vorlagen-Schaltfläche.
2
Regler anpassen — Passen Sie den Schatten mit X/Y-Versatz-, Unschärfe- und Ausbreitungsreglern an.
3
Vorschau — Überprüfen Sie das Ergebnis in Echtzeit in der Vorschau oben.
4
CSS kopieren — Verwenden Sie die Kopierschaltfläche, um das box-shadow-CSS zu kopieren.

Ja, verwenden Sie die Schaltfläche 'Schatten hinzufügen', um mehrere Schatten zu überlagern.

Ja, aktivieren Sie das Inset-Kontrollkästchen bei jedem Schatten, um einen inneren Schatten zu erzeugen.

Fünf Vorlagen werden angeboten: Subtle, Medium, Large, Inset und Double.

Ja, Sie können rgba(0,0,0,0.15) direkt im Farbeingabefeld eingeben.

Nein. Alle Berechnungen erfolgen im Browser.