CSS-Text-Shadow-Generator
Gestalte Textschatten und Neon-Effekte per Regler – mit Live-Vorschau und fertigem CSS.
Der Text-Shadow-Generator erzeugt die CSS-Eigenschaft text-shadow mit Live-Vorschau. Du stellst pro Ebene horizontalen und vertikalen Versatz, Weichzeichnung, Farbe und Deckkraft ein und kombinierst bis zu drei Ebenen. Vorlagen wie Neon-Glow, Retro-Schatten, Prägung und Outline dienen als Ausgangspunkt. Text- und Hintergrundfarbe der Vorschau sind frei wählbar.
Syntax von text-shadow
| Wert | Bedeutung | Beispiel |
|---|---|---|
| x-Versatz | Nach rechts (+) oder links (−) | 2px |
| y-Versatz | Nach unten (+) oder oben (−) | 2px |
| Blur | Weichzeichnung des Schattens | 4px |
| Farbe | Meist rgba für Transparenz | rgba(0,0,0,0.4) |
Beliebte Effekte
| Effekt | Technik |
|---|---|
| Weicher Schatten | Kleiner Versatz, mittlerer Blur, geringe Deckkraft |
| Neon-Glow | Mehrere Ebenen ohne Versatz, Blur wächst (7 / 20 / 40 px), Leuchtfarbe |
| Retro-3D | Harte Schatten (Blur 0) mit gestaffeltem Versatz in Farben |
| Prägung (Letterpress) | Heller Schatten unten, dunkler oben |
| Outline | Vier harte Schatten in alle Diagonalen |
So nutzt du den Generator
- Vorlage wählen oder startenWähle eine Vorlage und passe Werte an. Text- und Hintergrundfarbe der Vorschau kannst du jederzeit ändern.
- Ebenen einstellenFür Leuchteffekte staffelst du zwei oder drei Ebenen mit wachsendem Blur. Für harte Schatten setzt du Blur auf 0.
- Code kopierenÜbernimm die Zeile text-shadow in dein Stylesheet.
Gestaltungs- und Barrierehinweise
- Schatten sollen die Lesbarkeit unterstützen: Auf Fotos hilft ein dezenter dunkler Schatten hinter hellem Text.
- Neon-Effekte wirken nur auf dunklem Hintergrund; auf hellem Grund verlieren sie ihre Wirkung.
- Zu starke Schatten verschmieren Buchstaben – halte Blur bei kleiner Schrift niedrig.
- Text-Schatten ersetzen keinen Kontrast: Prüfe Text- und Hintergrundfarbe zusätzlich mit dem Kontrast-Checker.
- Für Überschriften in Verlaufsfarbe kombiniere mit background-clip:text; text-shadow wirkt dann anders.
Typische Anwendungsfälle für den Text-Shadow-Generator
Ein Textschatten ist das Mittel der Wahl, wenn Schrift auf einer unruhigen Fläche sitzt oder leuchten soll. Für die Seite eines Konzerts wählst du die Vorlage „Neon“, stellst die Schriftgröße auf 64 px und prüfst den Effekt auf einem dunklen Hintergrund, bevor du das CSS übernimmst. Für eine Überschrift auf einem Produktfoto reicht die Vorlage „Weich“ – Textfarbe, Hintergrund und Vorschautext wechselst du so oft, bis die Schrift auf jedem Bildausschnitt trägt.
Auch ohne Vorlage kommst du schnell zum Ziel: X- und Y-Versatz, Weichzeichnung und Deckkraft pro Ebene lassen sich einzeln ziehen, bis zu drei Ebenen bleiben übersichtlich. Die Vorschau skaliert von 24 bis 120 px, sodass derselbe Effekt für kleine Überschrift und breiten Banner geprüft werden kann. Die Lesbarkeit der Kombination prüfst du im Kontrast-Checker.
Häufige Probleme mit Textschatten – und was dagegen hilft
- Nach dem Ändern der Schriftgröße wirkt der Effekt zu klein – Ursache: Versatz und Weichzeichnung bleiben in Pixeln, die Schrift wird aber größer. Fix: Die Werte im Verhältnis zur neuen Größe neu ziehen.
- Der Vorschau-Text springt auf das Wort „Text“ – Ursache: Das Feld „Vorschau-Text“ war leer. Fix: Den eigenen Text eintragen, die Größe regelst du im Feld darunter.
- Der kopierte Code enthält eine color-Zeile – Ursache: Die Textfarbe der Vorschau wird mit ausgegeben. Fix: Die Zeile löschen, wenn die Farbe ohnehin im Stylesheet steht.
- Der Button „+ Ebene“ reagiert nicht mehr – Ursache: Die Zahl der Ebenen ist begrenzt. Fix: Eine bestehende Ebene entfernen und die Effektstufen neu verteilen.
- Der Leuchteffekt wirkt auf hellem Grund blass – Ursache: Die Vorlage setzt einen dunklen Hintergrund voraus. Fix: Das Feld „Hintergrund“ dunkel wählen oder eine andere Vorlage laden.
Wer von Textschatten profitiert – und wer nicht
Zuerst nutzen ihn Webdesigner und Blogger, die Überschriften von Bildern oder bunten Flächen abheben wollen, ohne die Datei nachzubearbeiten. Entwicklerinnen ziehen ihn heran, wenn ein Effekt schnell ausprobiert werden soll, statt Werte im Stylesheet zu raten. Betreiber von Event-, Portfolio- und Gaming-Seiten holen damit die leuchtenden Titel hervor, und im Unterricht zeigt der Generator, wie sich Versatz und Weichzeichnung auf die Lesbarkeit auswirken.
Nicht das richtige Werkzeug ist er für Schatten an Boxen und Karten: text-shadow hängt an den Glyphen und bleibt innerhalb der Zeile. Für Elemente nutzt du den Box-Shadow-Generator, für gefüllte Überschriften den Farbverlauf-Generator.
Datenschutz & Prüfung: Dieses Tool arbeitet vollständig lokal in deinem Browser – Eingaben und Dateien werden nicht hochgeladen oder gespeichert. Funktion geprüft: Oktober 2026.
Passende Tools
CSS-Farbverlauf-Generator
CSS-Farbverläufe gestalten: linear, radial und konisch mit mehreren Farbstopps – Code zum Kopieren.
Zum Tool DesignKontrast-Checker (WCAG)
Farbkontrast nach WCAG prüfen: Kontrastverhältnis, AA/AAA für Text und UI-Elemente – mit Verbesserungsvorschlag.
Zum Tool DesignCSS-Box-Shadow-Generator
CSS-Schatten gestalten: mehrere Ebenen, Weichzeichnung, Ausbreitung, Farbe und Inset – mit Vorschau.
Zum ToolHäufige Fragen
Wie mache ich einen Textschatten in CSS?
Mit text-shadow: 2px 2px 4px rgba(0,0,0,0.4); – Versatz x, y, Blur und Farbe.
Wie erzeuge ich einen Neon-Effekt?
Mehrere Schatten ohne Versatz mit zunehmendem Blur in einer Leuchtfarbe, auf dunklem Hintergrund.
Kann ich mehrere Schatten kombinieren?
Ja, trenne sie mit Kommas. Der erste liegt oben.
Wie mache ich eine Outline um Text?
Mit vier harten Schatten (Blur 0) in die Diagonalen oder mit -webkit-text-stroke.
Verbessert ein Textschatten die Lesbarkeit?
Auf unruhigen Hintergründen kann ein dezenter Schatten helfen, ersetzt aber keinen ausreichenden Kontrast.
Werden Einstellungen gespeichert?
Nein, alles läuft lokal.
Alle Tools an einem Ort
Über 100 Rechner für Alltag, Mathematik, Finanzen und mehr – kostenlos, ohne Anmeldung und mit sichtbarem Rechenweg.