Zum Hauptinhalt springen
EntwicklerProcessado no seu navegador

CSS-Box-Shadow-Generator

CSS-Schatten visuell mit Live-Vorschau erstellen.

0 von 3 Nutzungen heute · 3 übrig. Werde Pro und entferne das Limit.

Upgrade
Ebenen
1/6
Export
CSS3
Verarbeitung
Lokale Verarbeitung
01

Live-Vorschau

CSS-Ergebnis
box-shadow: 0px 30px 60px -15px #4f46e566;
02

Ebenen (1/6)

1
X-Versatz0px
Y-Versatz30px
Unschärfe60px
Ausbreitung-15px
Deckkraft40%

§ So verwenden

So erstellen Sie einen CSS-box-shadow visuell

Erstellen Sie Schatten jeder Tiefe (dezent bis dramatisch) mit Live-Vorschau und kopierfertigem Code.

  1. Versätze einstellen

    X (horizontal), Y (vertikal), Weichzeichnung (Weichheit) und Spread (Dicke). Ziehen Sie die Regler für sofortiges visuelles Feedback.

  2. Schattenfarbe wählen

    Standard ist Schwarz mit geringer Deckkraft (natürlicher Schatten). Für einen farbigen „Glow“ wählen Sie Ihre Markenfarbe.

  3. Mehrere Ebenen stapeln (optional)

    Professionelle Schatten nutzen 2-3 Ebenen (ein naher plus ein umgebender Schatten). Stapeln Sie sie für echte Tiefe.

  4. CSS kopieren

    Bereit zum Einfügen. Enthält ein optionales inset (innerer Schatten) und Cross-Browser-Präfixe.

Verwandte

Verwandte Werkzeuge

Da mesma categoria.