Box-Shadow-Generator – CSS-Schatten visuell erstellen
Box-Shadow intuitiv mit Schiebereglern und Farbwählern anpassen. Unterstützt mehrere Ebenen und Inset.
Layer 1
4px
4px
10px
0px
#00000040
#f0f0f0
#ffffff
Vorschau
CSS-Ausgabe
box-shadow: 4px 4px 10px 0px #00000040;
Verwendung
- X/Y/Blur/Spread/Color mit Schiebereglern anpassen
- Mehrere Schatten-Ebenen hinzufügen
- CSS-Code kopieren und verwenden
FAQ
- Kann ich mehrere Schatten hinzufügen?
- Ja. Sie können mehrere box-shadow-Werte stapeln.
- Kann das generierte CSS direkt verwendet werden?
- Ja. Kopieren Sie den Code und fügen Sie ihn direkt in Ihre CSS-Datei ein.
- Wird inset-Schatten unterstützt?
- Ja. Innerer Schatten (inset) kann ein-/ausgeschaltet werden.
- Werden meine Daten an einen Server gesendet?
- Alle Verarbeitungen finden im Browser statt. Es werden keine Daten an einen Server gesendet.
- Was tun, wenn der Schatten nicht wie erwartet aussieht?
- Passen Sie die Werte für Unschärfe, Streuung und Farbopazität an. Prüfen Sie auch, ob die Inset-Option korrekt aktiviert ist.
Verwandte Tools
Updateverlauf
Zuletzt aktualisiert: 2026-02-21
- 2026-02-21 Erstveröffentlichung