CSS Textschatten-Generator (text-shadow)

So funktioniert es

Tragen Sie die Schattenfarbe als einzelne Zeile links ein — HEX funktioniert ebenso wie rgb() oder hsl(). Danach arbeiten Sie mit den vier Reglern: die beiden Versatzwerte bestimmen die Richtung, in die der Schatten fällt, die Weichzeichnung bestimmt, wie weich seine Kante ausläuft, und die Deckkraft, wie stark der Hintergrund durchscheint. Für eine Überschrift mit dezenter Tiefe sind 2 Pixel Versatz, 6 Pixel Weichzeichnung und 40 % Deckkraft ein guter Start — im Code steht dann 2px 2px 6px rgba(0, 0, 0, 0.4). Für einen Neon-Effekt setzen Sie beide Versatzwerte auf 0, ziehen die Weichzeichnung auf 20 bis 30 Pixel und wählen eine leuchtende Farbe: der Schatten verteilt sich gleichmäßig um jeden Buchstaben und wirkt wie Licht. Für einen Prägeeffekt gehen Sie mit der Weichzeichnung auf 0 und mit dem Versatz auf 1 Pixel. Der Beispieltext wird bei jeder Änderung neu gezeichnet; die fertige Regel nehmen Sie aus dem rechten Feld, und wenn Sie ein Bild des Effekts brauchen, speichert die Download-Schaltfläche ein PNG in 1200×630 Pixeln.

Dieses Werkzeug ist auch als css text shadow generator, text shadow css, css schrift schatten, textschatten css, neon text css, text shadow beispiele bekannt.

Was ist text-shadow?

Die Eigenschaft text-shadow malt hinter die Zeichen eines Texts einen Schatten. Ihre Werte sind der Reihe nach ein horizontaler Versatz, ein vertikaler Versatz, eine optionale Weichzeichnung und eine Farbe; mehrere durch Kommas getrennte Gruppen stapeln Schattenschichten auf demselben Text. Der Schatten zeichnet die sichtbare Kontur jedes Zeichens nach — er gilt für die Buchstabenformen, nicht für den rechteckigen Kasten des Elements. Weder der Platzbedarf des Texts noch der Zeilenumbruch ändern sich; eine Überschrift gewinnt Tiefe, ohne dass sich auf der Seite etwas verschiebt.

Was ist Weichzeichnungsradius (blur)?

Der Weichzeichnungsradius ist die dritte Zahl: sie sagt, über wie viele Pixel die Kante des Schattens auslaufend verblasst. Bei 0 ist der Schatten eine scharfkantige Kopie des Texts; je größer der Wert, desto weiter verteilt sich der Schatten und desto heller wird er. Wächst die Weichzeichnung, während beide Versatzwerte auf 0 stehen, verteilt sich der Schatten gleichmäßig in alle Richtungen — das ist die Grundlage von Neon- und Leuchteffekten. Negativ kann der Radius nicht sein; deshalb beginnt der Regler dieses Werkzeugs bei 0.

Was ist der Unterschied zwischen text-shadow und box-shadow?

Beide folgen derselben Wertelogik, beschatten aber Verschiedenes: text-shadow folgt den sichtbaren Konturen der Buchstaben, box-shadow wird am rechteckigen Kasten des Elements gezeichnet. Geben Sie einer Überschrift einen box-shadow, fällt der Schatten unter den unsichtbaren Kasten um den Text — nicht unter die Buchstaben. Auch die Syntax unterscheidet sich: text-shadow kennt keinen Ausbreitungswert und kein inset, dafür ist das Stapeln von Schichten bei text-shadow deutlich üblicher, weil Effekte wie Neon und Prägung aus Schichten gebaut werden. Die praktische Regel: text-shadow für Buchstaben, box-shadow für Karten und Kästen.

Die Kontrastfalle: ein Schatten rettet unlesbaren Text nicht

Der häufigste Fehler mit text-shadow ist der Versuch, schlechten Kontrast damit zu reparieren. Ein dunkler Schatten hilft weißem Text auf einem Foto tatsächlich — aber Barrierefreiheitsprüfungen (das WCAG-Kontrastverhältnis) messen zwischen Textfarbe und Hintergrund und ignorieren den Schatten vollständig. Eine grundsätzlich falsche Kombination wie heller Text auf hellem Grund lässt sich so nicht retten: wählen Sie zuerst lesbare Farben und setzen Sie den Schatten als Tiefe obendrauf.

Die zweite Falle ist der harte, voll deckende Schatten: Weichzeichnung 0, Deckkraft 100 % und ein großer Versatz lassen den Schatten wie einen zweiten Abdruck des Texts aussehen; bei kleinen Schriftgrößen stört diese Doppelkante das Lesen erheblich. Die sicherste Regel: Fließtext bekommt keinen Schatten — heben Sie ihn für Überschriften und andere große Elemente auf.

Welcher Textschatten für welchen Zweck?

Dieselben vier Werte erzeugen in unterschiedlicher Gewichtung völlig verschiedene Effekte; der Code folgt immer demselben Muster.

• Weiße Überschrift auf einem Foto → 0 2 8 bei 50-60 % Deckkraft: der Text löst sich vom Bild
• Dezente Tiefe für einen Seitentitel → 2 2 6 bei 30-40 % Deckkraft: sichtbar, aber ruhig
• Neon / Leuchten → 0 0 24 mit leuchtender Farbe bei 80-100 %: ohne Versatz verteilt sich der Schatten rundum
• Prägung → 0 1 0 voll deckend: ein heller Pixel auf dunklem Grund, ein dunkler auf hellem

Häufige Fragen

Was bedeutet die Reihenfolge der text-shadow-Werte?

Die Lesart ändert sich nie: zuerst der horizontale Versatz, dann der vertikale, dann die Weichzeichnung, zuletzt die Farbe. Anders als bei box-shadow gibt es keinen Ausbreitungswert und kein inset — nach den drei Zahlen folgt direkt die Farbe. Die erzeugte Regel schreibt alle vier Teile aus; welchen Regler Sie auch bewegen, seine Zahl finden Sie im Code wieder.

Kann ich mehrere Schattenschichten auf denselben Text legen?

Ja — Schichten werden durch Kommas getrennt hintereinander geschrieben, und genau so entsteht ein voller Neon-Effekt: drei Schichten derselben Farbe mit 10, 20 und 40 Pixeln Weichzeichnung liegen übereinander. Diese Seite gibt bewusst nur eine Schicht aus, damit die Regel einfach bleibt; für Schichten erzeugen Sie mehrere Ergebnisse mit verschiedenen Einstellungen und verbinden die Teile selbst mit Kommas.

Was steckt in der heruntergeladenen PNG-Datei?

Der Beispieltext mit angewendetem Schatten, in 1200×630 Pixeln — praktisch, um den Effekt als Bild in eine Designabstimmung oder eine Nachricht zu legen. Der Code selbst steckt nicht in der Datei; ihn nehmen Sie über die Kopierschaltfläche aus dem rechten Feld, wo er nach jeder Änderung bereitsteht.

Sieht der Schatten in jedem Browser gleich aus?

Die Wertesyntax ist in allen aktuellen Browsern identisch, und text-shadow wird seit vielen Jahren unterstützt. Die Weichheit der Kante kann sich zwischen den Rendering-Engines dennoch in Nuancen unterscheiden; bei einem kritischen Design lohnt ein kurzer Blick im Zielbrowser.