CSS Text-Shadow-Generator
Generiere text-shadow-Werte visuell. Setze Versatz, Unschärfe und Farbe für jeden Schatten; füge mehrere Schatten hinzu und kopiere das CSS sofort.
Preview
Shadows
CSS
text-shadow: 0px 2px 4px #00000040; Voreinstellungen
Inhaltsverzeichnis
Was ist text-shadow?
text-shadow ist eine CSS-Eigenschaft, die einen oder mehrere Schatten hinter Text zeichnet. Du setzt den horizontalen und vertikalen Versatz, den Unschärferadius und die Farbe. Im Gegensatz zu box-shadow hat text-shadow keine Streuung oder Innenwert — nur Versatz, Unschärfe und Farbe. Mehrere Schatten werden durch Kommas getrennt.
Syntax
text-shadow: offset-x offset-y blur-radius color; Mehrere Schatten: text-shadow: shadow1, shadow2, ...; Versätze und Unschärfe sind in px. Farbe kann hex, rgb oder rgba sein; verwende Transparenz für weichere Schatten.
Anwendungsfälle
- Überschriften und Titel — Weicher Schatten für Tiefe oder Lesbarkeit auf belebten Hintergründen.
- Umrisseffekt — Kleiner Versatz ohne Unschärfe für einen Umriss.
- Glühen — Null Versatz mit großer Unschärfe und halbtransparenter Farbe.
- Geschichtete Tiefe — Mehrere Schatten für einen realistischeren Schlagschatten.
Häufig gestellte Fragen
text-shadow gilt nur für Text und hat keine Streuung oder Innenwert — nur offset-x, offset-y, blur und color. box-shadow gilt für die Box des Elements und unterstützt Streuung und Innenwert.
Ja. Füge mehr Schatten mit "Schatten hinzufügen" hinzu. Sie stapeln sich in der Reihenfolge; der erste ist oben. Verwende mehrere Schatten für geschichtete Tiefe.