Box Shadow Generator

Ich arbeite zwar so gut wie nie mit box-shadow aber ich bin fest überzeugt, dass man damit schöne Sachen machen kann.
Von daher habe ich mal den Generator gebaut. Vielleicht kann er Euch helfen.

Die Werte kurz erklärt:

  • X-Versatz (Pflichtwert): Verschiebt den Schatten horizontal. Positive Werte schieben ihn nach rechts, negative Werte nach links.
  • Y-Versatz (Pflichtwert): Verschiebt den Schatten vertikal. Positive Werte schieben ihn nach unten, negative Werte nach oben.
  • Weichzeichnung (Blur-Radius, optional): Bestimmt, wie unscharf der Schatten verläuft. Ein Wert von 0 erzeugt eine harte Kante. Je höher der Wert, desto softer der Effekt.
  • Farbe (Optional): Legt die Schattenfarbe fest (z.B. HEX, RGB, RGBA oder Farbnamen). Ohne Angabe nutzt der Browser standardmäßig die aktuelle.
  • Spread (Optional): Die Ausdehnung. Positive Werte machen den Schatten größer, negative Werte machen ihn kleiner. Standard ist 0.
  • Inset (Optional): Ändert den Schatten von einem Außenschatten in einen Innenschatten. Der Schatten fällt dann in das Element hinein.

Es grüßt Thomas

Wenn Ihr Anregungen oder Kommentare zu den Generator habt, seid so nett und kontaktiert mich unter: Kontakt

2
-1
5
0
1
box-shadow: 2px -1px 5px 0px rgb(112,175,4,1);
    
 
Inset:
OFF
ON