Box-Schattengenerator

Entwerfen Sie geschichtete Kastenschatten mit Versatz, Unschärfe, Ausbreitung und Farbe. Sehen Sie sich eine Vorschau auf einer Karte an und kopieren Sie dann das CSS mit einem Klick.

Box Shadow Generator

Live

Offset X8px

Offset Y16px

Blur32px

Spread-4px

Opacity35%

Card radius24px

Shadow color

Inset

Preview card

CSS output

box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35);
border-radius: 24px;

Key capabilities

Entwerfen Sie geschichtete Kastenschatten mit Versatz, Unschärfe, Ausbreitung und Farbe – inklusive Live-Vorschau.
Läuft in Ihrem Browser
Kostenlose Nutzung

Anleitung

Passen Sie Versatz, Unschärfe und Ausbreitung an.
Wählen Sie Farbe und Deckkraft (oder fügen Sie Ebenen hinzu).
Kopieren Sie das Box-Shadow-CSS.

How this tool works

Passen Sie Versatz, Unschärfe und Ausbreitung an.
Wählen Sie Farbe und Deckkraft (oder fügen Sie Ebenen hinzu).
Kopieren Sie das Box-Shadow-CSS.

Recommended settings

Verwenden Sie zunächst die Standardoptionen und passen Sie sie dann bei Bedarf an

Supported formats

Text / on-page input

File size and limits

Sehr komplexe mehrschichtige Vorschauen wirken sich auf älteren Telefonen möglicherweise langsamer aus.

Privacy

Farb- und CSS-Generatoren laufen vollständig in Ihrem Browser. Vorschauen und Konvertierungen laden Ihre Stile niemals hoch.

Common use cases

Verwenden Sie den Box-Shadow-Generator, wann immer Sie ihn benötigen: Entwerfen Sie mehrschichtige Box-Schatten mit Versatz, Unschärfe, Ausbreitung und Farbe – inklusive Live-Vorschau.

Troubleshooting

Die Vorschau sieht nach dem Einfügen anders aus

Überprüfen Sie Ihre Seite auf konkurrierendes CSS (Zurücksetzungen, geerbte Farben). Kopieren Sie die generierte Regel zunächst in ein isoliertes Stylesheet.

FAQ

Lädt dies mein CSS hoch?

Nein. Generatoren und Konverter laufen in Ihrem Browser mit Live-Vorschau.

Brauche ich ein Konto?

Nein. Öffnen Sie das Tool, passen Sie die Steuerelemente an und kopieren Sie das CSS.