Tokenlabor

Text-Shadow-Generator

Der Text-Shadow-Generator erstellt CSS-Textschatten mit mehreren Ebenen, von weichem Schatten über Kontur bis Neon-Effekt, mit Live-Vorschau an Ihrem Text.

Schatten
CSS-Code

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

CSS-Textschatten gestalten

Der Text-Shadow-Generator erstellt CSS Textschatten und zeigt sie live an Ihrem eigenen Text. Ein Schatten besteht aus Versatz nach rechts und unten, Unschärfe und Farbe. Mehrere Schatten trennt die Eigenschaft text-shadow durch Kommas; der Generator verwaltet sie als Ebenen, die Sie einzeln bearbeiten, hinzufügen und entfernen. Die zuerst genannte Ebene liegt oben.

Aus wenigen Ebenen entstehen bekannte Effekte: Eine Schrift mit Schatten in leichter Unschärfe hebt Überschriften auf Fotos vom Hintergrund ab. Vier harte Schatten ohne Unschärfe in alle Richtungen ergeben eine Kontur. Für den Neon-Effekt legen Sie mehrere unscharfe Schatten in einer kräftigen Farbe übereinander, je größer die Unschärfe, desto weiter das Leuchten. Gestapelte Schatten mit jeweils einem Pixel mehr Versatz erzeugen eine 3D-Schrift.

Achten Sie auf Lesbarkeit: Schatten ersetzen keinen ausreichenden Kontrast zwischen Schrift und Hintergrund, prüfen Sie ihn mit dem Kontrastprüfer. Bei langen Texten wirken Schatten schnell unruhig, sie passen eher zu Überschriften und kurzen Schlagworten. Für Schatten an Kästen statt an Schrift nutzen Sie box-shadow.

Anleitung: Text-Shadow-Generator in 5 Schritten

  1. Eine Vorlage wählen, etwa Weicher Schatten, Kontur oder Neon-Effekt, oder mit eigenen Ebenen beginnen.
  2. Die Ebene bearbeiten: Versatz x, Versatz y, Unschärfe, Schattenfarbe und Deckkraft einstellen.
  3. Mit „Ebene hinzufügen“ und „Ebene entfernen“ mehrere Schatten kombinieren.
  4. Vorschautext, Schriftgröße der Vorschau, Schriftfarbe und Hintergrund an das eigene Design anpassen.
  5. Den CSS-Code kopieren und in das Stylesheet einfügen.

Typische Anwendungsfälle

  • Überschriften auf großen Titelbildern vom unruhigen Hintergrund abheben.
  • Neon-Schriftzüge für Banner, Spieleseiten oder Event-Ankündigungen gestalten.
  • Konturschrift für Logos oder Vorschaubilder erzeugen, ohne ein Grafikprogramm zu öffnen.
Fragen

Häufige Fragen

Wie ist text-shadow aufgebaut?

text-shadow: versatz-x versatz-y unschärfe farbe, zum Beispiel 2px 2px 4px rgba(0, 0, 0, 0.4). Positive Werte verschieben den Schatten nach rechts und unten, negative nach links und oben.

Kann ich mehrere Textschatten kombinieren?

Ja, beliebig viele, durch Kommas getrennt. Der erste Schatten liegt oben. So entstehen Konturen, Neon-Leuchten und 3D-Effekte.

Wie erzeuge ich einen Neon-Effekt?

Mit heller Schrift auf dunklem Hintergrund und mehreren Schatten in derselben kräftigen Farbe mit wachsender Unschärfe, etwa 5, 10, 20 und 40 Pixel. Die Vorlage Neon-Effekt zeigt ein Beispiel.

Gibt es eine Eigenschaft für Textkonturen?

Es gibt -webkit-text-stroke, das von aktuellen Browsern unterstützt wird, aber nicht standardisiert ist. Mehrere harte Textschatten sind die verbreitete Alternative mit sehr guter Browserunterstützung.

Verbessert ein Schatten den Kontrast?

Ein Schatten kann helfen, Text auf unruhigen Fotos lesbar zu machen. Bei der Kontrastprüfung nach WCAG zählt er aber nicht; Schrift- und Hintergrundfarbe sollten auch ohne Schatten genug Kontrast haben.

Wie entferne ich einen Textschatten in CSS?

Mit text-shadow: none. Das überschreibt auch Schatten, die ein Theme setzt oder die vom Elternelement geerbt werden.

Kann man text-shadow animieren?

Ja, text-shadow lässt sich mit transition oder @keyframes animieren, etwa für ein pulsierendes Neon-Leuchten. Am saubersten wird der Übergang, wenn beide Zustände gleich viele Schattenebenen haben.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge

Farbumwandler

HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

Öffnen

Farbpalette aus Bild

Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

Öffnen

Kontrast prüfen (WCAG)

Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

Öffnen

CSS-Gradient-Generator

Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

Öffnen

Box-Shadow-Generator

CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

Öffnen

Flexbox-Generator

Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

Öffnen