Text-Shadow-Generator
Der CSS Text Shadow Generator legt Versatz, Unschärfe, Farbe und Deckkraft von text-shadow mit Live-Vorschau fest und lässt dich mehrere Schattenebenen für Glow-, Kontur- und 3D-Texteffekte stapeln.
Über dieses Tool
Der CSS Text Shadow Generator legt Versatz, Unschärfe, Farbe und Deckkraft von text-shadow mit Live-Vorschau fest und lässt dich mehrere Schattenebenen für Glow-, Kontur- und 3D-Texteffekte stapeln.
So funktioniert’s
- Passe horizontalen und vertikalen Versatz sowie die Unschärfe an.
- Wähle Schattenfarbe und Deckkraft sowie Textfarbe und -größe.
- Klicke auf „Ebene hinzufügen“, um einen weiteren Schatten zu stapeln; „Ebenen zurücksetzen“ beginnt von vorn.
- Klicke auf „CSS kopieren“.
Gut zu wissen
- Die Syntax von text-shadow lautet: offset-x offset-y blur-radius color.
- Anders als box-shadow hat text-shadow keinen spread-Wert und kein Schlüsselwort inset.
- Mehrere Schatten werden durch Kommas getrennt, wobei der erste ganz oben gezeichnet wird.
- Ein Schatten ohne Versatz, aber mit Unschärfe erzeugt einen Glow-Effekt.
- Mehrere gestapelte Versätze von 1 px erzeugen einen 3D- oder Letterpress-Look.
Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.
Häufige Fragen
Wie füge ich Text in CSS einen Schatten hinzu?
Verwende text-shadow, zum Beispiel text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
Wie erstelle ich leuchtenden Text?
Nutze einen Versatz von null mit Unschärfe und einer hellen Farbe, zum Beispiel text-shadow: 0 0 8px #1db954; – stapele Ebenen für einen stärkeren Glow.
Kann ich mehr als einen Textschatten verwenden?
Ja. Trenne die Schatten mit Kommas; dieses Tool fügt jede Ebene für dich hinzu.
Beeinflusst text-shadow die Lesbarkeit?
Dezente Schatten können die Lesbarkeit auf Bildern verbessern, starke Schatten mindern aber die Klarheit – prüfe den Kontrast mit einem Kontrast-Checker.