CSS Text-Shadow Generator
Erstellen Sie standardkonforme CSS-Deklarationen für text-shadow mit konfigurierbarem Versatz, Weichzeichnungsradius und Farbwert.
Tool ausführen
Mit diesem Online-Werkzeug erstellen Sie saubere CSS-Deklarationen für die Eigenschaft text-shadow. Sie passen den horizontalen Versatz, den vertikalen Versatz, den Weichzeichnungsradius sowie den Farbwert direkt an Ihre Layout-Anforderungen an. Das Werkzeug wandelt Ihre numerischen Eingaben für Versatz und Unschärfe automatisch in standardkonforme Pixelangaben mit der Einheit px um. Nach dem Klick auf „Generieren“ erscheint die CSS-Deklaration mit abschließendem Semikolon und kann direkt in Ihr Stylesheet übernommen werden. Wenn Sie Felder leer lassen, greifen praktische Standardwerte: 1px horizontaler Versatz, 1px vertikaler Versatz, 2px Weichzeichner sowie die halbtransparente schwarze Farbe #00000033. Auch der Wert 0 ist für alle Versatz- und Weichzeichnerfelder zulässig, wenn Sie harte Konturen oder zentrierte Schatteneffekte ohne Verschiebung benötigen. Der Farbwert unterstützt Hexadezimalcodes mit und ohne Alpha-Kanal sowie andere im Web gebräuchliche Farbformate als Text. So formatieren Sie Schatten für Überschriften, Schaltflächen und UI-Texte im Handumdrehen ohne manuelle Tippfehler.
Anleitung
- Geben Sie den gewünschten Zahlenwert für den horizontalen Versatz ein oder behalten Sie den Standardwert 1 bei.
- Tragen Sie den vertikalen Versatz als Zahl ein oder belassen Sie den Standardwert 1.
- Legen Sie den Radius für die Weichzeichnung fest, wobei der Standardwert 2 beträgt.
- Geben Sie die gewünschte Farbe als Hexadezimalcode oder Farbangabe ein, wie beispielsweise #00000033.
- Klicken Sie auf „Generieren“, um die CSS-Deklaration im Ergebnisbereich zu sehen.
Beispiele
- Dezenter Schatten mit Standardeinstellungen: Ohne Eingabe liefert das Tool text-shadow: 1px 1px 2px #00000033;.
- Zentrierter Weichzeichner-Effekt: Mit Versatz X auf 0, Versatz Y auf 0, Weichzeichner auf 8 und Farbe rgba(0, 0, 0, 0.4) entsteht text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);.
- Scharfe Konturkante: Mit Versatz X auf 2, Versatz Y auf 2, Weichzeichner auf 0 und Farbe #222222 wird text-shadow: 2px 2px 0px #222222; generiert.
FAQ
Welche Maßeinheit wird für Versatz und Weichzeichnung verwendet?
Alle numerischen Werte für Versatz und Unschärfe werden automatisch mit der CSS-Einheit px formatiert.
Welche Standardwerte gelten, wenn Eingabefelder leer bleiben?
Bei leeren Feldern gelten 1 für den horizontalen Versatz, 1 für den vertikalen Versatz, 2 für die Weichzeichnung und #00000033 für die Schattenfarbe.
Kann für den Versatz oder Weichzeichner auch der Wert 0 eingegeben werden?
Ja, der Wert 0 ist für alle Versatz- und Weichzeichnerfelder gültig, um beispielsweise Schatten ohne Verschiebung oder harte Kanten zu erzeugen.