Schatten gibt es in CSS nicht nur fuer Boxen, sondern auch fuer Schrift. Die Eigenschaft text-shadow legt einen oder mehrere Schatten hinter die einzelnen Buchstaben. Richtig eingesetzt sorgt sie fuer dezente Tiefe, einen Neon-Glow oder – oft am wichtigsten – fuer bessere Lesbarkeit von Text auf Bildern. Dieser Artikel erklaert die Werte und die wichtigsten Effekte.
Die Syntax von text-shadow
Ein einfacher Textschatten sieht so aus: text-shadow: 1px 1px 2px rgba(0,0,0,0.5);. Anders als bei box-shadow gibt es hier nur drei Laengenwerte plus Farbe – einen Spread-Radius gibt es bei Text nicht:
- Horizontaler Offset (X): verschiebt den Schatten nach rechts oder links.
- Vertikaler Offset (Y): verschiebt den Schatten nach unten oder oben.
- Blur-Radius: optional; 0 ergibt einen harten Doppelgaenger des Buchstabens, hoehere Werte einen weichen Schimmer.
- Farbe: beliebig, meist halbtransparentes Schwarz fuer Tiefe oder eine kraeftige Farbe fuer Effekte.
Diese Werte stellst du im Text Shadow Generator per Regler ein, siehst sofort die Wirkung an einem Beispieltext und kopierst die fertige text-shadow-Zeile in dein Stylesheet.
Die wichtigsten Effekte
Mit denselben drei Werten lassen sich sehr unterschiedliche Looks bauen:
- Dezente Tiefe: Ein kleiner Versatz (1–2 px) mit etwas Blur und niedriger Deckkraft hebt Ueberschriften leicht von der Flaeche ab, ohne aufdringlich zu wirken.
- Neon-Glow: Offset 0, grosser Blur und eine leuchtende Farbe – oft mehrfach gestapelt – lassen Text leuchten. Mehrere Schatten kommas-getrennt verstaerken den Effekt.
- Outline-Imitat: Vier harte Schatten ohne Blur in alle Richtungen (oben, unten, links, rechts) erzeugen eine guenstige Kontur, ohne dass du
-webkit-text-strokebrauchst.
Der eigentliche Nutzen: Lesbarkeit
Der haeufigste sinnvolle Einsatz ist gar kein Effekt, sondern Funktion: Liegt heller Text ueber einem Foto, geht er in hellen Bildbereichen unter. Ein dezenter dunkler Schatten (etwa 0 1px 3px rgba(0,0,0,0.6)) legt eine unsichtbare Trennung zwischen Buchstabe und Hintergrund und haelt den Text in jedem Bildausschnitt lesbar. Genau dafuer findet man text-shadow in fast jedem Hero-Bereich mit Bildhintergrund.
Mass halten und Barrierefreiheit
Bei Fliesstext gilt Zurueckhaltung: Zu starke Schatten machen kleine Schrift unscharf und anstrengend zu lesen. Reserviere kraeftige Effekte fuer grosse Ueberschriften und Logos. Und denk daran, dass ein Schatten den Farbkontrast nicht ersetzt – die eigentliche Textfarbe muss auch ohne Schatten genug Kontrast zum Hintergrund haben.
Den Kontrast deiner Schriftfarbe pruefst du schnell im Farbkontrast Checker. Brauchst du stattdessen Schatten fuer eine ganze Box statt fuer Text, ist der Box Shadow Generator das richtige Werkzeug. Weitere Frontend-Helfer findest du unter kotsch.tech/webtools.
Fazit
text-shadow kommt mit drei Werten plus Farbe aus und deckt damit alles ab – von dezenter Tiefe ueber Neon-Glow bis zur Kontur. Der wertvollste Einsatz bleibt aber unspektakulaer: ein leiser Schatten, der Text auf Bildern zuverlaessig lesbar haelt. Den passenden Code stellst du am schnellsten visuell zusammen.