CSS-Text-Shadow-Generator
Textschatten mit mehreren Ebenen gestalten: Versatz, Unschärfe, Farbe und Deckkraft, Vorlagen wie Neon oder 3D – CSS und Tailwind.
Der CSS-Text-Shadow-Generator gestaltet Textschatten mit beliebig vielen Ebenen. Pro Ebene stellst du horizontalen und vertikalen Versatz, Unschärfe, Farbe und Deckkraft ein. Vorlagen wie Neon, 3D, Kontur, Retro oder Prägung zeigen, was mehrere Ebenen leisten. Fertig sind die CSS-Eigenschaft und die passende Tailwind-Klasse.
Schatten
Ebenen
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);Textschatten in CSS
text-shadow legt einen oder mehrere Schatten hinter die Buchstaben. Jede Ebene hat
einen Versatz, eine Unschärfe und eine Farbe. Erst die Kombination mehrerer Ebenen macht Effekte
wie Leuchten, Kontur oder Tiefe möglich.
| Effekt | Rezept |
|---|---|
| Weicher Schatten | Kleiner y-Versatz, mittlere Unschärfe, geringe Deckkraft |
| Neon | Mehrere Ebenen ohne Versatz mit steigender Unschärfe |
| 3D | Viele Ebenen ohne Unschärfe, jeweils 1 px weiter versetzt |
| Kontur | Vier Ebenen mit ±1 px in alle Diagonalen |
Schatten für Boxen und Karten erstellst du im Box-Shadow-Generator, Farbverläufe auf Schrift im Text-Gradient-Generator.
Häufige Fragen
Wie ist text-shadow aufgebaut?
text-shadow: x y unschärfe farbe. x und y verschieben den Schatten, die Unschärfe macht ihn weich. Mehrere Schatten trennst du mit Kommas; der erste liegt oben. Anders als box-shadow kennt text-shadow kein spread und kein inset.
Wie entsteht ein Neon-Effekt?
Mit mehreren Schatten ohne Versatz und mit wachsender Unschärfe in einer kräftigen Farbe, dazu weiße oder sehr helle Schrift auf dunklem Grund. Die Vorlage „Neon“ zeigt das mit vier Ebenen.
Gibt es text-shadow in Tailwind?
Ab Tailwind CSS 4.1 gibt es text-shadow-Utilities. Eigene Werte setzt du mit der arbitrary value text-shadow-[…], die der Generator ausgibt. In älteren Versionen nutzt du [text-shadow:…].
Beeinträchtigt ein Textschatten die Lesbarkeit?
Ein dezenter Schatten kann Text auf Bildern lesbarer machen. Starke Effekte gehören eher in große Überschriften. Für Fließtext gilt: Kontrast zwischen Schrift und Hintergrund zuerst prüfen, der Schatten zählt dabei nicht.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.