Tool Hub

Schatten-Generator

Mehrere box-shadow- oder filter:drop-shadow-Ebenen mit Live-Vorschau stapeln

Mehrere Schattenebenen stapeln, um Tiefeneffekte zu erzeugen. box-shadow für solide Elemente (unterstützt inset und Spread) oder filter:drop-shadow für transparente Formen (PNG, SVG) verwenden. Die Live-Vorschau aktualisiert sich beim Anpassen jeder Ebene.

Schattenebenen

Vorschau

CSS
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15);

Wie man es benutzt

  1. Wählen Sie zwischen box-shadow und drop-shadow Modus mit der segmentierten Steuerung.
  2. Passen Sie Offset X, Offset Y, Unschärfe, Spread und Farbe für die erste Schatten-Schicht an.
  3. Klicken Sie '+ Layer', um mehrere Schatten zu stapeln und jede unabhängig zu konfigurieren.
  4. Zeigen Sie den kombinierten Effekt auf der Live-Schatten-Vorschau-Karte an.
  5. Kopieren Sie die generierte CSS-Deklaration aus dem Ausgabe-Bereich und fügen Sie sie in Ihren Stylesheet ein.

Beispiele

  • Das Setzen von offsetY=4, Unschärfe=12, Spread=0, Farbe=rgba(0,0,0,0.15) erzeugt einen Standard-Kartenschatten: box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15).
  • Das Hinzufügen einer zweiten Schicht mit offsetY=1, Unschärfe=3 und Farbe=rgba(0,0,0,0.08) erzeugt einen geschichteten Tiefeneffekt, der in Material-Stil-UI beliebt ist.

Ergebnisse vor dem Produktiveinsatz prüfen. Keine Gewährleistung — siehe Nutzungsbedingungen.