CSS Textschatten Generator

Einstellungen

48px

Vorschau

Text Shadow

CSS-Ausgabe

 
  
 
Vollständige Regel
 
 
 
  
 
 
 
So nutzen Sie das Tool
 
     
  1. Versatz einstellen — X/Y-Regler ziehen, um den Schatten zu positionieren.
    2.  
  2. Unschärfe anpassen — Höhere Werte erzeugen weichere Schatten.
    3.  
  3. Farbe & Deckkraft — Farbe wählen und Transparenz regeln.
    4.  
  4. Ebenen stapeln — Bis zu 3 Schattenebenen für Glow-, Prägung- oder 3D-Effekte.
    5.  
  5. Kopieren — "CSS kopieren" und direkt verwenden.
    6.  
 
 
 
Was ist CSS Text-Shadow?
 
text-shadow fügt Schatten an Textinhalte an. Jeder Schatten hat X-Versatz, Y-Versatz, Unschärfe und Farbe — kein Spread wie bei box-shadow.
 
Mehrere kommagetrennte Schatten erzeugen Effekte wie Neon-Glow, Letterpress oder 3D-Text. In allen modernen Browsern unterstützt.
 
 
 
Typische Einsatzszenarien
 
 
Hero-Überschriften
 
Neon-Glow-Text
 
Letterpress-Effekt
 
3D-Texttiefe
 
Text über Bildern
 
Logo-Styling
 
 
Tipps & Best Practices
 
 
 Lesbarkeit zuerst 
Dezente Schatten verbessern Lesbarkeit auf unruhigen Hintergründen. Schwere Schatten können stören.
 
 
 Neon-Glow-Trick 
2–3 Ebenen mit steigender Unschärfe und heller Farbe auf dunklem Hintergrund.
 
 
 Letterpress-Effekt 
1px weißer Schatten unter dunklem Text auf mittlerem Hintergrund für eingelassenen Look.
 
 
 Performance 
Text-Shadow ist GPU-beschleunigt. Große Blur-Werte auf langen Absätzen vermeiden.
 
 
 
Häufig gestellte Fragen
 
 
Unterschied zwischen text-shadow und box-shadow?
 
text-shadow folgt der Glyphenform. box-shadow folgt der Border-Box. Text-shadow hat keinen Spread-Wert.
 
 
 
Mehrere Textschatten möglich?
 
Ja, kommagetrennt. Erste Angabe liegt oben.
 
 
 
Funktioniert text-shadow überall?
 
Ja. In Chrome, Firefox, Safari und Edge ohne Prefixes unterstützt.
 
 
 
Kann man text-shadow animieren?
 
Ja. Per CSS-Transition oder Keyframes animierbar. Blur-Werte für flüssige Animation moderat halten.