Text-Shadow-Generator

CSS text-shadow mit Schiebereglern erstellen und Live-Textvorschau sehen

Was ist das und wie funktioniert es?

CSS text-shadow fügt einem Text eine oder mehrere Schlagschatten hinzu, definiert durch horizontalen Versatz, vertikalen Versatz, Weichzeichnerradius und Farbe. Ein einzelner gut eingestellter Schatten lässt Überschriften auf einem Hintergrundbild hervorstechen; mehrere Schatten überlagert erzeugen Neon-Glüh-, Letterpress-, Langschatten- oder 3D-Extrusionseffekte — rein in CSS.

Dieser Generator bietet eine Live-Vorschau mit Steuerelementen für jede Schattenebene. Die Ausgabe ist eine fertige CSS text-shadow-Deklaration zum Einfügen.

Anwendungsfälle

• Lesbarkeit über Bildern: Fügen Sie dem weißen Hero-Text über einem variablen Fotohintergrund einen weichen dunklen Schatten hinzu (0px 1px 3px rgba(0,0,0,0.6)).
• Neon-Glow: Überlagern Sie drei Schatten im gleichen Farbton mit zunehmenden Weichzeichnerradien (0 0 5px, 0 0 15px, 0 0 30px).
• Letterpress/Geprägt: Eine helle Schatten unten-rechts und eine dunkle oben-links kombinieren.

Häufige Fragen

Was ist die Reihenfolge der Werte in text-shadow?

text-shadow: offset-x offset-y blur-radius color. Der Blur-Radius ist optional (Standard 0 = harter Rand).

Kann ich text-shadow ohne Weichzeichner für harte Schatten verwenden?

Ja. Blur-Radius auf 0 setzen ergibt einen scharfrandigen Schatten — Grundlage für Langschatten- und Retro-8-Bit-Effekte.

Funktioniert text-shadow bei ::before und ::after Pseudo-Elementen?

Ja — text-shadow gilt für den Textinhalt von Pseudo-Elementen genauso wie für echten Text.

Ist text-shadow dasselbe wie box-shadow?

Nein. text-shadow gilt nur für die Textglyphen; box-shadow für die gesamte Elementbox. text-shadow unterstützt das Schlüsselwort inset nicht.

CSS

Box-Shadow-Generator · Border-Radius-Generator · Flexbox-Generator · CSS-Grid-Generator · CSS-Animations-Generator · CSS-Filter-Generator