Text Shadow Generator

Den Textschatten-Generator bedienen

1. Tippe deinen Vorschautext und wähle eine Schriftgröße. Echter Text enthüllt Probleme, die Lorem Ipsum verbirgt - dunne Striche, diakritische Zeichen, weiter Buchstabenabstand.
2. Setze X-Offset, Y-Offset und Unschärfe. Offsets verschieben den Schatten; Unschärfe weicht ihn auf. Anders als bei box-shadow hat text-shadow keinen Spread-Wert - du kompensierst mit gestapelten Schatten.
3. Wähle Farbe plus Deckkraft. Vollständig deckende Schatten auf Text sehen fast nie gut aus. Beginne bei 30-50% Alpha.
4. Stapele Schichten mit "+ Schatten hinzufügen". Mehrere durch Komma getrennte Schatten sind das Fundament für Neon, Konturen, Letterpress und retro 3D-Text.
5. Lade eine Voreinstellung (Leuchten, Neon, 3D, Pragen) um ein ausgearbeitetes Beispiel zu sehen, und optimiere dann von dort aus.
6. Kopiere CSS und fügen es in dein Stylesheet ein - die Ausgabe ist eine Standard-text-shadow-Deklaration ohne Vendor-Präfixe.

Wie text-shadow gerendert wird

text-shadow ist in CSS Text Decoration Module Level 3 definiert und akzeptiert eine durch Komma getrennte Liste von Schattenwerten, jeder mit X-Offset, Y-Offset, optionalem Unschärferadius und Farbe. Entscheidend ist, dass es keinen spread-Parameter gibt - der Schatten folgt immer den tatsächlichen Glyphenkonturen, die vom Schrift-Renderer (HarfBuzz, CoreText oder DirectWrite je nach Betriebssystem) erzeugt werden. Das bedeutet, dass Ligaturen, kursive Neigungen, variable-font Weight-Achsen und Emoji alle korrekt schattiert werden.

Intern rendert der Browser den Text zweimal: einmal als Schattenfarbe mit dem Glyphenpfad-Offset und durch einen Gauss-Kernel verschmiert, einmal als Vordergrundfarbe darüber. Gestapelte Schatten stapeln sich von hinten nach vorne wie bei box-shadow, sodass der erste Schatten in der Liste ganz oben gerendert wird. Auf modernen Browsern läuft der Unschärfe-Durchlauf auf der GPU, aber sehr große Unschärferadien (über ~30px) verursachen immer noch merkliche Paint-Zeit - Chromes DevTools Performance-Panel zeigt die Auswirkung in den "Paint"- und "Composite Layers"-Zeilen. Bei einfachem Schlagschatten-Text gibt es keine Layout-Auswirkung, nur Paint.

Realistische Einsätze für text-shadow

• Heldentext über Fotos - ein subtiler dunkler Schatten rettet die Lesbarkeit, wenn du das Hintergrundbild nicht kontrollieren kannst.
• Neon-Reklame-Effekte, die 3-6 gleichfarbige Schatten mit wachsenden Unschärferadien stapeln.
• Retro 3D-Typografie mit einer engen Treppe aus 1px-Offsets: 1px 1px 0 #222, 2px 2px 0 #222, 3px 3px 0 #222.
• Letterpress / Pragen - ein 1px weisser Schatten mit negativem Y-Offset lässt dunklen Text ins Papier eingeschnitzt aussehen.
• Fake-Konturen durch Stapeln von vier 1px-Schatten bei +X/-X/+Y/-Y für Browser, wo -webkit-text-stroke nicht ausreicht.
• Fokus- und Hover-Betonung bei großen Überschrift-Links - ein wachsendes Leuchten signalisiert Interaktivitat ohne Layoutverschiebung.

Wissenswerte Fallstricke

• WCAG-Kontrast gilt weiterhin. Ein Schatten zählt nicht als Vordergrundkontrast - Screen Reader ignorieren ihn vollständig, und Benutzer mit schwacher Sehkraft nehmen ihn möglicherweise nicht wahr. Behält das zugrunde liegende Text-zu-Hintergrund-Verhältnis bei 4,5:1 (normal) oder 3:1 (groß), auch wenn der Schatten die Dinge "lesbar" aussehen lasst.
• Subpixel-Zittern bei dünnen Schriftarten. Halbe-Pixel-Offsets wie 0.5px 0.5px bei hellen Schriftarten können auf Nicht-Retina-Displays unscharfes Doppeln erzeugen. Auf ganze Pixel für Body-Größen runden; Subpixel ist für Überschriften in Ordnung.
• Unschärferadius muss nicht-negativ sein. Ein negativer Unschärfe ist ungültig und die gesamte Deklaration wird verworfen. Browser warnen dich nicht - der Text wird einfach ohne Schatten gerendert.
• Kein inset-Schlusselwort. Anders als box-shadow hat text-shadow keinen Innenschatten-Modus. "Eingedruckte" Texteffekte werden durch Kombinieren eines dunklen Schattens oben mit einem hellen Schatten unten oder via background-clip: text simuliert.
• Emoji werden überfärbt. Auf manchen Systemen werden mehrfarbige Emoji-Glyphen in der Schattenphase abgeflacht, was seltsam aussehen kann, wenn du Text schattierst, der Emoji enthält.
• Druckstylesheets. Viele Druckertreiber ignorieren text-shadow - verlasse dich nie auf einen Schatten als bedeutungsvolle Unterscheidung in @media print.

Hintergrund zur Eigenschaft (auch: CSS-Schriftschatten-Generator)

text-shadow erschien zunächst in CSS2 (1998), wurde aber in CSS 2.1 entfernt, weil kein Browser es tatsächlich implementiert hatte; es kehrte in CSS3 zurück und wurde in Safari 1.1, Firefox 3.5, Chrome von Anfang an und IE10 implementiert. Die aktuelle Spezifikation befindet sich in CSS Text Decoration Module Level 3, das auch text-decoration-line, text-underline-offset und verwandte typografische Effekte abdeckt. Die Browserunterstützung ist laut caniuse.com jetzt 100% ohne Präfixe. Die Spezifikation ist bewusst einfach - zwei Offsets, eine Unschärfe, eine Farbe - weshalb komplexe Effekte durch Stapeln mehrerer Schatten statt durch zusätzliche Parameter erstellt werden. Für die Barrierefreiheit gilt: WCAG 2.2 Erfolgskriterium 1.4.11 "Nicht-Text-Kontrast" gilt nicht für dekorative Textschatten, aber 1.4.3 "Kontrast (Minimum)" regelt weiterhin das zugrunde liegende Text/Hintergrund-Paar.

text-shadow vs. Alternativen

text-shadow ist das richtige Werkzeug für Schlagschatten, Leuchten und gestapelte Offsets auf tatsächlichem Text. Für einen geschärften Umriss ist -webkit-text-stroke besser - es wird überall außer in altem Firefox unterstützt und erzeugt eine einphasige konturierte Glyphe. Für farbige Konturen plus Füll plus Schatten (häufig in Spielen und Titelkarten) schlägt SVG <text> mit stroke und filter CSS bei weitem, weil du die Strichausrichtung und das Miter-Verhalten kontrollieren kannst. Für animiertes Text-Beleuchtung bleiben CSS-Variablen, die in @keyframes interpoliert werden, der einfachste Weg - Houdini gibt dir Frame-genaue Kontrolle, fügt aber viel Komplexität hinzu. Wo CSS text-shadow verliert, sind hochwertige typografische Effekte wie variable Unschärfe pro Buchstaben oder entlang-der-Grundlinie Schattenverzerrung - diese gehören in Canvas 2D, WebGL oder einen Bildeditor. Und denke an den Entscheidungsbaum: Wenn der Schatten Teil des Markenlogos ist, exportiere ein SVG; wenn es sich um Überschriften-Styling auf jeder Seite handelt, ist text-shadow günstiger und wartbarer als jede Asset-Pipeline.