CSS-Box-Shadow-Generator
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
Zuletzt aktualisiert: 2026 · Kostenloses Online-Tool
Was ist CSS-Box-Shadow-Generator?
Kostenloser Online-CSS-box-shadow-Generator mit Reglern für Versatz, Weichzeichnung, Streuung, Farbe und Inset, der eine Live-Vorschau des Schattens bietet und kopierfertigen box-shadow-CSS-Code erzeugt.
Anleitung
- 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.
Verwandte Tools
CSS-Gradient-Generator Kostenloser visueller CSS-Gradient-Generator: Erstellen Sie lineare, radiale und konische Farbverläufe, passen Sie Farbstopps und Winkel an und kopieren Sie den fertigen CSS-Code.
CSS-Border-Radius-Generator Kostenloser Online-CSS-border-radius-Generator mit acht unabhängigen Ecken-Handles und Schiebereglern, der eine Live-Vorschau der abgerundeten Form zeigt und kopierfertigen border-radius-CSS-Code erzeugt.
CSS-Flexbox-Generator Kostenloser Online-CSS-Flexbox-Playground mit visuellem Editor für justify-content, align-items, flex-direction und wrap, der eine Live-Layout-Vorschau zeigt und kopierfertigen Flexbox-CSS-Code erzeugt.
Häufig gestellte Fragen
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.