CSS Shadow Generator

Erstellen Sie Box-Shadow und Text-Shadow mit Live-Vorschau

CSS Shadow Generator

Generieren Sie Box-Shadow und Text-Shadow mit Live-Vorschau und sofortigem CSS-Code

1. Schatten-Typ wählen

2. Box-Shadow Parameter

5
5
10
0

3. Farbe und Deckkraft

0.5

4. Live-Vorschau

Text

5. CSS-Code

6. Beispiele

Weicher Schatten
Harter Schatten
Inset
Bunt
Text-Glow

Über CSS-Shadow

box-shadow und text-shadow erzeugen Schatteneffekte für Elemente. Die Parameter im Überblick:

  • Horizontal (X) – Positive Werte = Schatten rechts, negative = links
  • Vertikal (Y) – Positive Werte = Schatten unten, negative = oben
  • Weichzeichner – Je größer, desto weicher der Schatten
  • Spread – Vergrößert/verkleinert den Schatten (nur box-shadow)
  • Farbe – Schattenfarbe mit einstellbarer Deckkraft
  • Inset – Innerer Schatten (nur box-shadow)
Box-Shadow Text-Shadow Inset