CSS Text- Schatten Generator
Erstellen Sie mehrschichtige CSS-Textschatten-Effekte visuell mit Live-Vorschau.
① Versatz & Blur pro Layer anpassen ② Mehrere Schattenebenen hinzufügen ③ CSS kopieren
Presets:
Schatten 1
2px
2px
4px
30%
CSS-Code
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
Was ist CSS text-shadow?
Die CSS-Eigenschaft text-shadow fügt Text einen oder mehrere Schatten hinzu. Jeder Schatten wird durch X-Versatz, Y-Versatz, Unschärferadius und Farbe definiert — z.B. text-shadow: 2px 2px 4px rgba(0,0,0,0.5). Mehrere Layer werden durch Komma getrennt und von vorne nach hinten gerendert. Ein großes Blur mit rgba() und nullem Versatz erzeugt einen Neon-Glüheffekt.
Häufig gestellte Fragen
CSS text-shadow fügt Text Schatteneffekte hinzu. Jeder Schatten erfordert X-Versatz, Y-Versatz, Unschärferadius und Farbe. Mehrere durch Komma getrennte Schatten erzeugen komplexe Ebeneneffekte.
Ja. CSS text-shadow akzeptiert eine kommagetrennte Liste von Schattendefinitionen. Jeder Schatten wird der Reihe nach angewendet, wobei der erste oben erscheint.
Der Unschärferadius steuert, wie verschwommen der Schatten ist. Ein Wert von 0 ergibt einen scharfen Schatten. Größere Werte erzeugen weichere Schatten.
Verwenden Sie vier Schatten mit 0 Unschärfe, jeweils in eine Richtung versetzt: text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black.
Stapeln Sie mehrere Schatten mit zunehmenden X- und Y-Versätzen in derselben Farbe: text-shadow: 1px 1px #aaa, 2px 2px #aaa, 3px 3px #aaa.
Text-shadow ist GPU-beschleunigt in modernen Browsern. Große Unschärferadien auf sehr langem Text können auf Low-End-Geräten die Renderleistung beeinflussen.
CSS text-shadow wird von allen modernen Browsern seit 2010 unterstützt. Keine Vendor-Prefixe erforderlich.