CSS-Text-Shadow-Generator
NeuEinen CSS-Textschatten mit Live-Vorschau abstimmen und den Code kopieren.
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
CSS-Textschatten mit Live-Vorschau gestalten
Dieser CSS-Text-Schatten-Generator ermöglicht es Ihnen, Tiefe, Leuchte und Kontureffekte visuell zu gestalten und sauberes, produktionsbereites CSS zu kopieren. Klicken Sie direkt in die große Vorschau, um Ihren eigenen Text einzugeben, ziehen Sie die Regler für Versatz, Unschärfe und Deckkraft, wählen Sie eine Farbe und beobachten Sie, wie sich text-shadow in Echtzeit über Ihren Text aktualisiert.
Ändern Sie Schriftfamilie, Größe und Gewicht, legen Sie die Textfarbe fest und wechseln Sie den Hintergrund zwischen Hell, Grau, Dunkel und einem Schachbrettmuster, um genau zu sehen, wie Ihr Schatten auf verschiedenen Oberflächen aussieht — unerlässlich für Neon-Text- und Leuchttext-Effekte, die nur auf dunklem Hintergrund korrekt wirken.
Die text-shadow-Syntax erklärt
Ein einzelner CSS-Schatten wird als text-shadow: offset-x offset-y blur-radius color geschrieben. offset-x und offset-y verschieben den Schatten horizontal und vertikal (negative Werte werfen ihn nach oben oder links), der blur-radius weicht die Kante auf (0 hält sie scharf) und die Farbe bestimmt den Ton — meist ein halbtransparentes Schwarz für subtile Tiefe oder ein greller Farbton für einen Leuchteffekt.
Ein klassischer, gut lesbarer Schatten ist text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4). Beide Versätze auf 0 setzen und Unschärfe erhöhen ergibt einen sanften Lichthof. Mit einer grellen Farbe (z. B. #00eaff) und mehreren zunehmenden Unschärfewerten entsteht ein Neon-Leuchten.
Mehrere Schatten stapeln: Neon, 3D, Kontur und langer Schatten
Die wahre Stärke von text-shadow liegt im Stapeln. Sie können mehrere Textschatten in einer einzigen Deklaration auflisten, getrennt durch Kommas, und der Browser malt jeden nacheinander. Mehrere Schatten derselben grellen Farbe mit zunehmender Unschärfe erzeugen einen Neon-/Leuchteffekt; schrittweise nach unten und rechts verschobene Schatten in dunkler werdenden Tönen bauen extrudierten 3D-Text; dasselbe flache Offset über zehn oder mehr Schichten wiederholt ergibt einen langen Schatten; vier bis acht harte Versätze rund um die Buchstaben produzieren Konturtext.
Nutzen Sie die Preset-Galerie — Sanft, Neon, Leuchten, 3D, Langer Schatten, Kontur, Retro, Feuer und Letterpress — als Ausgangspunkt.
CSS, Tailwind oder React Native kopieren
Exportieren Sie das Ergebnis so, wie Ihr Projekt es braucht. CSS kopieren liefert eine Standard-text-shadow-Deklaration; Tailwind kopieren erzeugt eine beliebige Eigenschaftsklasse wie [text-shadow:2px_2px_4px_#00000066], die mit den nativen text-shadow-*-Utilities von Tailwind v4 funktioniert; React Native kopieren wandelt die erste Ebene in textShadowColor, textShadowOffset und textShadowRadius um.
Gute Nachricht zur Browser-Kompatibilität: text-shadow ist vollständig standardisiert und benötigt in keinem modernen Browser -webkit-- oder -moz--Präfixe.
Vergleich mit CSSmatic, css.generator.cool und anderen Tools
Die meisten Online-Textschatten-Tools verarbeiten nur eine Schattenebene. Der Text-Schatten-Bereich von CSSmatic bietet einen Satz Schieberegler — nützlich für einen einfachen Schatten, aber Sie können keine Ebenen für Neon- oder 3D-Effekte stapeln, ohne die zusätzlichen Deklarationen manuell zu schreiben.
UtiloKit kombiniert Mehrebenen-Stapeln, neun Presets, die mit einem Klick einen vollständigen Schattenstapel laden, bearbeitbare Live-Vorschau, Einzel-Klick-Kopieren in drei Formaten (CSS, Tailwind, React Native) und eine teilbare URL — ohne Anmeldung und ohne hochgeladene Dateien.
text-shadow vs box-shadow
Ein häufiger Verwechslungspunkt: text-shadow folgt dem Buchstabenumriss, während box-shadow der rechteckigen Box eines Elements folgt. text-shadow hat weder einen Ausbreitungsradius noch ein inset-Schlüsselwort — daher kann ein Textschatten im Gegensatz zu box-shadow nicht eingebettet werden. Verwenden Sie text-shadow für Überschriften, Logos und Beschriftungen, und box-shadow für Karten und Schaltflächen.
Um einen eingeprägten oder gestempelten Look beim Text zu erzielen, ist der Trick ein helles Schatten knapp unter dem dunklen Text (siehe Preset Letterpress) — kein echtes Inset. Für dicke Textumrisse ist die Eigenschaft -webkit-text-stroke sauberer als acht Richtungsschatten zu stapeln.
Tipps für lesbare Schatten — und Datenschutz
Schatten sind ein stilistisches Element, kein Kontratersatz. Für Text über Fotos verbessert ein einzelner, niedrig deckender Schatten wie 0 1px 3px rgba(0, 0, 0, 0.5) die Lesbarkeit ohne Ablenkung. Reservieren Sie schwere Neon- und 3D-Effekte für große Display-Überschriften und prüfen Sie stets, ob der Textkontrast noch WCAG erfüllt.
Es gibt nichts zu installieren und kein Konto zu erstellen. Jede Vorschau und jede generierte CSS-Zeile wird lokal in Ihrem Browser erzeugt — der eingegebene Text verlässt Ihr Gerät nie.
Frequently asked questions
Wie wende ich einen Textschatten an?
Fügen Sie die CSS-Eigenschaft text-shadow zu einem beliebigen Textelement hinzu. Die Kurzform ist text-shadow: offset-x offset-y blur-radius color — z. B. wirft text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4) einen weichen Schatten 2px rechts und 2px nach unten mit 4px Unschärfe.
Was ist text-shadow in CSS?
text-shadow ist die CSS-Eigenschaft, die einen oder mehrere Schatten hinter dem Text eines Elements zeichnet. Jeder Schatten nimmt bis zu vier Werte an: horizontaler Versatz (X), vertikaler Versatz (Y), optionaler Unschärferadius und Farbe — geschrieben als text-shadow: 1px 1px 2px #000000.
Wie füge ich in CSS einen Schatten hinzu?
Für Text verwenden Sie text-shadow in der Element-Regel, z. B. h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }. Für Boxen, Karten und Schaltflächen verwenden Sie stattdessen box-shadow.
Wie füge ich Schatten an Text im Design-Tool hinzu?
In einem Design-Tool wie Figma, Sketch oder Photoshop fügen Sie einer Textebene einen Drop-Shadow-Effekt hinzu und setzen X/Y-Versatz, Unschärfe und Farbe. Diese vier Werte lassen sich fast eins zu eins in CSS übersetzen: ein Figma-Schatten mit X 2, Y 2, Blur 4, Schwarz 40% ergibt text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4).
Wie erstelle ich einen leuchtenden oder Neon-Texteffekt?
Ein Neon-Leuchten besteht aus mehreren Schatten derselben grellen Farbe, gestapelt mit Null-Versatz und zunehmender Unschärfe. Beispiel: text-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff, 0 0 20px #00eaff, 0 0 40px #0066ff; auf weißem Text vor dunklem Hintergrund. Laden Sie das Neon-Preset hier für ein sofortiges Ergebnis.
Wie erstelle ich 3D-Text oder langen Schatten?
Beide Effekte verwenden mehrere Schatten mit Versatz aber ohne Unschärfe. Für extrudierten 3D-Text stapeln Sie Ebenen, die nach unten und rechts in zunehmend dunklerer Farbe verlaufen. Die Presets 3D und Langer Schatten bauen diese Ebenstapel für Sie auf.
Wie erstelle ich Konturtext mit text-shadow?
Platzieren Sie vier (oder acht) harte Schatten rund um den Text, einen in jede Richtung, mit Unschärfe 0. Beispiel: text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111; gibt weißem Text einen dünnen dunklen Umriss.
Wie erstelle ich mehrere Textschatten?
Trennen Sie sie durch Kommas innerhalb einer einzigen text-shadow-Deklaration: text-shadow: 1px 1px 2px #000, 0 0 8px #0ff;. Der Browser malt sie der Reihe nach, den ersten Schatten oben. So werden Neon-, 3D-, Feuer- und Kontureffekte aufgebaut.
Kann text-shadow inset sein?
Nein. Im Gegensatz zu box-shadow hat die Eigenschaft text-shadow kein inset-Schlüsselwort und keinen Ausbreitungsradius. Um einen geprägten Look auf hellem Hintergrund zu simulieren, fügen Sie einen subtilen hellen Schatten knapp unter dunkelgrauem Text ein, z. B. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);. Das Preset Letterpress zeigt genau diesen Trick.
Wie erstelle ich einen Textschatten in Tailwind CSS?
Tailwind CSS v4 enthält native Text-Schatten-Utilities (text-shadow-sm, text-shadow-md, text-shadow-lg). Für einen benutzerdefinierten Wert verwenden Sie eine beliebige Eigenschaft, bei der Leerzeichen zu Unterstrichen werden: class="[text-shadow:2px_2px_4px_#00000066]".
Benötige ich -webkit- oder -moz-Präfixe für text-shadow?
Nein. text-shadow ist vollständig standardisiert und wird in allen modernen Browsern ohne Präfixe unterstützt, daher reicht ein einfaches text-shadow: 1px 1px 2px #000; völlig aus.
Was ist der Unterschied zwischen text-shadow und box-shadow?
text-shadow wirft einen Schatten von der Form der Glyphen (den Buchstaben selbst), box-shadow von der rechteckigen Box eines Elements. text-shadow hat weder Ausbreitungsradius noch inset-Option; box-shadow hat beides.
Wie füge ich einen dezenten Schatten hinzu, um die Lesbarkeit zu verbessern?
Verwenden Sie einen weichen, niedrig deckenden dunklen Schatten mit kleinem Versatz und wenigen Pixeln Unschärfe — z. B. text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);. Das hebt weißen oder hellen Text von einem Foto- oder Verlaufshintergrund ab.
Wie vergleicht es sich mit anderen text-shadow-Tools wie CSSmatic?
CSSmatic hat einen Text-Schatten-Bereich, verarbeitet aber nur eine einzige Ebene — Sie können für Neon-, 3D- oder Kontureffekte keine mehreren Schatten stapeln, ohne den Code manuell zu bearbeiten. UtiloKit ist das einzige kostenlose Tool, das Mehrebenen-Stapeln, benannte Presets, Live-Vorschau und Ein-Klick-Export in CSS, Tailwind und React Native vereint.
Wie kopiere ich das generierte CSS und funktioniert es offline?
Klicken Sie auf CSS kopieren für eine einfügebereite Deklaration, Tailwind kopieren für die beliebige Wertklasse oder React Native kopieren für das Äquivalent textShadowColor / textShadowOffset / textShadowRadius. Verwenden Sie Link teilen, um die genauen Einstellungen in der URL zu speichern. Alles ist kostenlos ohne Anmeldung, läuft lokal und funktioniert auch offline.
Related tools
Alle Tools ansehen
Neu CSS-Verlaufsgenerator
Lineare, radiale und konische CSS-Verläufe mit Live-Vorschau erstellen.
Neu CSS-Box-Shadow-Generator
Mehrschichtige CSS-Box-Shadows mit Voreinstellungen und Live-Vorschau bauen. CSS, Wert oder React-Style sofort kopieren.
Neu Farbpaletten-Generator
Komplementäre, analoge, triadische und monochromatische Paletten erzeugen.
Neu Cubic-Bezier-Generator
Eine CSS-Easing-Kurve durch Ziehen von Kontrollpunkten gestalten — mit Live-Vorschau.
Neu Border-Radius-Generator
Abgerundete CSS-Ecken und organische Blob-Formen visuell gestalten.
Neu CSS-Flexbox-Playground
Flex-Eigenschaften mit Live-Vorschau anpassen und das CSS kopieren.