CSS-Text-Shadow-Generator: Neon, 3D, Long Shadow + Tailwind | We.Inc
Erstelle mehrschichtige CSS-Textschatten mit Live-Vorschau. Starte mit Vorlagen für Neon, 3D, Long Shadow, Letterpress oder Outline und kopiere dann das CSS oder eine Tailwind-Klasse.
CSS-Text-Shadow-Generator
Die CSS-Eigenschaft text-shadow nimmt einen x-Versatz, einen y-Versatz, einen optionalen Unschärferadius und eine Farbe, zum Beispiel text-shadow: 0 2px 6px rgb(0 0 0 / 0.25). Trenne mehrere Schatten mit Kommas, um sie zu stapeln: So entstehen Neon-Leuchteffekte und 3D-Schrift. Baue unten einen Schatten und kopiere das CSS oder die Tailwind-Klasse.
Die vier Werte eines Schattens
Wert
Beispiel
Wirkung
x-Versatz
Verschiebt den Schatten nach rechts (negativ: nach links)
y-Versatz
Verschiebt den Schatten nach unten (negativ: nach oben)
Unschärferadius
Macht die Kante weicher; 0 ergibt eine harte Kopie
rgb(0 0 0 / 0.25)
Jede CSS-Farbe; Standard ist die Textfarbe
Staple so viele Ebenen, wie du möchtest, ändere Text, Schriftgröße und Farben und sieh zu, wie sich die Vorschau aktualisiert. Das Ergebnis ist reines CSS, das in jedem aktuellen Browser funktioniert, plus eine Tailwind-Klasse für Projekte, die Tailwind nutzen.
Wähle eine Vorlage oder starte mit einem einzelnen weichen Schatten.
Bearbeite Versatz, Unschärfe, Farbe und Deckkraft jeder Ebene oder füge Ebenen hinzu und entferne sie. Zuerst aufgeführte Ebenen liegen oben.
Passe Vorschautext, Größe, Schriftstärke und Farben an dein Design an.
Kopiere die CSS-Deklaration oder die Tailwind-Klasse mit Arbitrary Property.
Schatten zählen bei Kontrastprüfungen nicht mit. Stelle sicher, dass der Text auch ohne Schatten gegen seinen Hintergrund besteht, und füge den Schatten dann als letzten Schliff hinzu.
Bei weißem Text auf einem unruhigen Foto hilft ein weicher dunkler Schatten der Lesbarkeit mehr als ein harter. Kombiniere ihn mit einem dunklen Overlay auf dem Bild, damit der Text wirklich lesbar wird.
Große Unschärferadien auf vielen Ebenen kosten Renderzeit, und sie zu animieren kostet noch mehr. Setze starke Leuchteffekte nur bei Überschriften ein, nicht im Fließtext.
Ein heller 1px-Schatten unter grauem Text auf grauem Hintergrund ergibt den eingeprägten Letterpress-Look; kehre den Versatz um, damit der Text erhaben wirkt.
Häufige Fragen
Wie erstelle ich Neon-Text mit CSS?
Verwende hellen Text mit mehreren Schatten in derselben kräftigen Farbe, ohne Versatz und mit wachsender Unschärfe: zuerst ein enger weißer Schein, dann Leuchteffekte mit 12px, 24px und 48px in der Akzentfarbe. Setze das Ganze auf einen dunklen Hintergrund. Die Vorlage Neon ist ein guter Ausgangspunkt.
Unterstützt text-shadow einen Spread-Wert wie box-shadow?
Nein. text-shadow hat keinen Spread-Wert und kein inset-Schlüsselwort. Um eine dickere Kontur vorzutäuschen, stapelst du mehrere harte Schatten, die um ein Pixel in jede Richtung versetzt sind, wie es die Vorlage Outline macht, oder du nutzt -webkit-text-stroke.
Wie füge ich in Tailwind einen Textschatten hinzu?
Tailwind 4.1 und neuer enthalten text-shadow-Utilities wie text-shadow-sm und text-shadow-lg. Für einen eigenen Schatten in jeder Version nutzt du eine Arbitrary Property wie [text-shadow:0_2px_6px_rgb(0_0_0/0.25)], wobei Unterstriche für Leerzeichen stehen. Der Generator schreibt diese Klasse für dich.
Warum sieht mein Schatten in Safari anders aus?
Browser rastern Unschärfe leicht unterschiedlich, deshalb können große Unschärfen je nach Engine weicher oder kräftiger wirken. Harte Schatten ohne Unschärfe sehen überall gleich aus.
So funktioniert das Stapeln
Jeder durch Kommas getrennte Schatten wird hinter den Text gezeichnet, und der erste in der Liste liegt über allen anderen. Diese Reihenfolge ist für 3D-Effekte wichtig: Führe die nächste, hellste Ebene zuerst auf und die entfernteste, dunkelste zuletzt.
Long Shadows sind einfach viele identische Ebenen, die jeweils um ein Pixel versetzt sind. In einer großen Überschrift wirken sie eindrucksvoll, aber jede Ebene muss zusätzlich gezeichnet werden, also halte die Anzahl der Schritte überschaubar.
Barrierefreiheit und Bewegung
Schatten können kleinen Text verwischen und ihn für Menschen mit Sehschwäche schwerer lesbar machen. Spare dekorative Effekte für große Überschriften auf und halte den Fließtext scharf.
Wenn du einen Leuchteffekt animierst, packe die Animation in eine prefers-reduced-motion-Abfrage, damit Menschen, die weniger Bewegung eingestellt haben, eine statische Version sehen.