Zum Hauptinhalt springen

CSS-Box-Shadow-Generator

Gestalten Sie mehrschichtige Box-Shadows visuell und kopieren Sie das fertige CSS.

So funktioniert es

  1. 1Wählen Sie eine Vorlage oder Schattenebene.
  2. 2Stellen Sie X/Y, Unschärfe, Ausbreitung, Farbe, Deckkraft und Inset in der Live-Vorschau ein.
  3. 3Fügen Sie Ebenen hinzu, duplizieren, entfernen oder sortieren Sie sie und kopieren Sie CSS oder die Variable.

Über dieses Tool

X verschiebt horizontal, Y vertikal. Unschärfe macht Kanten weich, Ausbreitung verändert die Grundfläche. Inset zeichnet innen; mehrere Ebenen kombinieren Tiefe und Akzente. Beispiel: box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .25);. Vermeiden Sie zu starke Unschärfe, matschigen Kontrast und zu viele Ebenen.

Häufig gestellte Fragen