Text Shadow & Stroke

Mit text-shadow lassen sich Schatten und leuchtende Effekte erzeugen. -webkit-text-stroke zeichnet eine Kontur um die Buchstaben. Beide Eigenschaften können einzeln oder miteinander kombiniert werden.

Text Shadow

text-shadow fügt Schatten zu Text hinzu und ermöglicht Effekte wie Glühen, 3D-Text, bessere Lesbarkeit auf Bildern und mehr.

text-shadow: offset-x offset-y blur-radius color;

Hinweis: offset-x und offset-y sind Pflichtwerte, blur-radius und color sind optional.

Die vier Werte

offset-xHorizontaler Versatz (+ = rechts, - = links) – Pflicht
offset-yVertikaler Versatz (+ = unten, - = oben) – Pflicht
blur-radiusUnschärfe (0 = scharf, höher = weicher) – Optional
colorSchattenfarbe – Optional

h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

Kombinationen

text-shadow: 2px 2px ... → Schatten rechts-unten (klassisch)
text-shadow: -2px -2px ... → Schatten links-oben
text-shadow: 0 0 ... → Schatten zentriert (Glow-Effekt)

Beispiele

Welches ist das Original?

Text-shadow ist eine Kopie des Textes. In diesem Beispiel wurde nur die vertikale Verschiebung verändert.

.copy {text-shadow: 0 20px  0 orange;}

Klassischer Schatten

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

3D-EFFEKT

text-shadow: 
  1px 1px 0 #c0392b,
  2px 2px 0 #c0392b,
  3px 3px 0 #c0392b,
  4px 4px 0 #c0392b,
  5px 5px 0 #c0392b,
  6px 6px 10px rgba(0,0,0,0.4);

NEON GLOW

text-shadow: 
  0 0 10px #00f3ff,
  0 0 20px #00f3ff,
  0 0 30px #00f3ff,
  0 0 40px #00d4ff,
  0 0 70px #00d4ff,
  0 0 80px #00d4ff;

Cloud-Effekt mit vielen Schatten

text-shadow: 
  40px 20px 1px dimgray,
  30px -20px 1px salmon,
  20px 30px 5px black, 
  0 0 20px salmon,
  1px 1px 2px darkgray;

SOMMER

text-shadow: 
  3px 2px 0 yellow,
  6px 4px 0 yellowgreen,
  9px 6px 0 green,
  12px 8px 0 forestgreen,
  15px 10px 0 blue,
  18px 12px 0 violet;

Dynamische Schatten

Auch bei text-shadow können clamp() für flexible Werte und light-dark() für die Schattenfarbe verwendet werden.

light dark & clamp

:root {
  color-scheme: light dark;
}

h2 {
  text-shadow:
    0 0
    clamp(4px, 1vw, 16px)
    light-dark(deeppink, cyan);
}

Performance-Tipp: Viele text-shadow-Effekte können die Performance beeinträchtigen, besonders bei langen Texten. Komplexe Schatten werden daher eher für Überschriften und wichtige Elemente verwendet, nicht für Fliesstext.

text-stroke

-webkit-text-stroke zeichnet eine Kontur um die Buchstaben – vergleichbar mit der Trennung von Füllung (Fill) und Kontur (Stroke) in Layoutprogrammen. Trotz des Präfixes unterstützen alle gängigen Browser die Eigenschaft. Eine standardisierte Version ohne Präfix gibt es bisher nicht.

Syntax

-webkit-text-stroke: width color;

Kurzschreibweise für -webkit-text-stroke-width und -webkit-text-stroke-color, die auch einzeln gesetzt werden können.

Beispiele

Nur Kontur

-webkit-text-stroke: 2px indigo;
-webkit-text-fill-color: transparent;

Kontur + Füllung

-webkit-text-stroke: 2px hotpink;

Shadow und Stroke kombinieren

SHADOW & STROKE

-webkit-text-stroke: 1px yellow;
text-shadow: 4px 4px 0 cyan;

Hinweis: -webkit-text-fill-color übernimmt die Füllung anstelle von color – und vererbt sich an Kind-Elemente. Wird die Eigenschaft weiter oben im DOM gesetzt, kann sie z.B. einen Hover-Farbwechsel auf einem verschachtelten Link überschreiben.

Achtung: Die Kontur wächst zentriert auf der Buchstabenkante – anders als in Illustrator/InDesign, wo Konturen meist nach aussen erweitert werden. Bei dicken Strokes können enge Formen (z.B. runde Buchstaben) innen zulaufen.

Kurz gesagt

text-shadow fügt Schatten hinzu – für 3D, Glow, Lesbarkeit und mehr
-webkit-text-stroke zeichnet eine Kontur um die Buchstaben – trotz Präfix in allen gängigen Browsern nutzbar