CSS-Box-Shadow-Generator

CSS-box-shadow-Generator mit Reglern für Versatz, Weichzeichnung, Streuung, Farbe und Inset sowie Live-Vorschau. Der kopierfertige box-shadow-CSS-Code entsteht sofort, kostenlos im Browser.

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

Dieses Tool auf deiner Website einbetten

Powered by Patrache Studio DevTools
Zuletzt aktualisiert: 2026 · Kostenloses Online-Tool

Was ist CSS-Box-Shadow-Generator?

CSS-box-shadow-Generator mit Reglern für Versatz, Weichzeichnung, Streuung, Farbe und Inset sowie Live-Vorschau. Der kopierfertige box-shadow-CSS-Code entsteht sofort, kostenlos im Browser.

Anleitung

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

Verwandte Tools

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.

Diese Website verwendet Cookies für eine bessere Nutzererfahrung und Werbung. Mehr erfahren

Bitte erlaube Werbung auf dieser Website

Um diese Werkzeuge zu nutzen, erlaube Werbung auf dieser Website. Werbung hält diesen Dienst kostenlos.

Öffne deinen Werbeblocker, deaktiviere ihn für diese Website und prüfe erneut.