Was ist der Unterschied zwischen text-shadow und box-shadow?

text-shadow wendet den Schatten auf die Glyphenformen des Textes an, nicht auf die Box des Elements. Es gibt außerdem keinen Ausdehnungsradius und kein inset-Schlüsselwort — jede Ebene besteht nur aus X- und Y-Versatz, einem optionalen Unschärferadius und einer Farbe. Für Schatten an Karten oder Containern verwenden Sie stattdessen box-shadow.

Spielt die Reihenfolge der Schattenebenen eine Rolle?

Ja. Der erste Schatten in der kommagetrennten Liste wird über den späteren gezeichnet, daher bestimmt die Stapelreihenfolge den Effekt direkt. Beim Neon Glow etwa steht die kleine, helle Unschärfe vorn und der breite, blasse Hof darunter. Nutzen Sie die Auf/Ab-Schaltflächen, um Ebenen umzusortieren, und beobachten Sie die Vorschau.

Warum lässt sich die Vorschau zwischen hell und dunkel umschalten?

Die Wirkung eines Textschattens hängt stark vom Hintergrund ab: Ein Neon Glow, der auf einer dunklen Seite leuchtet, ist auf Weiß nahezu unsichtbar, und ein Prägeeffekt braucht einen mittleren Farbton, um überhaupt zu wirken. Die Prüfung beider Vorschauen verhindert, dass Sie einen Schatten ausliefern, der nur in einem Theme funktioniert.

Text-Shadow-Generator | HandyTools Hub

Anleitung

Mit einer Vorlage starten — Wählen Sie Subtil, Harte Kontur, Neon Glow, Retro 3D oder Prägung, um einen fertigen Ebenenstapel zu laden — oder beginnen Sie mit dem einzelnen weichen Standardschatten.
Ebene auswählen — Klicken Sie auf eine Ebene in der Liste; die ausgewählte Ebene wird hervorgehoben und ihre Werte in den Editor darunter geladen.
Ebene feinabstimmen — Passen Sie Versatz X/Y, Unschärferadius, Farbe und Deckkraft mit den Reglern an; Vorschau und CSS-Ausgabe aktualisieren sich bei jeder Änderung.
Ebenen stapeln und sortieren — Fügen Sie Ebenen für Tiefeneffekte hinzu und verschieben Sie sie nach oben oder unten. Vordere Ebenen werden oben gezeichnet — genau daraus entstehen Glow- und 3D-Effekte.
Beide Hintergründe prüfen — Schalten Sie die Vorschau zwischen hell und dunkel um und ziehen Sie den Schriftgrößen-Regler, um den Schatten in realistischer Größe zu sehen.
CSS kopieren — Klicken Sie auf „CSS kopieren” und fügen Sie die text-shadow-Deklaration in Ihr Stylesheet ein. Ebenen ohne Unschärfe werden ohne Unschärfe-Komponente ausgegeben, damit das Ergebnis sauber bleibt.

Funktionen

Mehrfach-Ebenen-Bearbeitung — Beliebig viele Schattenebenen hinzufügen, entfernen, auswählen und umsortieren — mit eigenem Versatz, Unschärfe, Farbe und Deckkraft pro Ebene.
Fünf abgestimmte Vorlagen — Subtil, Harte Kontur, Neon Glow, Retro 3D und Prägung bieten bewährte Ausgangspunkte für gängige Effekte.
Hell/Dunkel-Vorschau — Ein zweistufiger Hintergrund-Schalter plus Schriftgrößen-Regler zeigt den Schatten so, wie Nutzer ihn tatsächlich sehen.
Saubere CSS-Ausgabe — Ebenen werden in Stapelreihenfolge kommagetrennt, Farben erscheinen bei voller Deckkraft als Hex und darunter als rgba(), Unschärfe wird bei null weggelassen.
100 % clientseitig — Alles läuft in Ihrem Browser; keine Daten verlassen Ihr Gerät.

Anwendungsfälle

Tiefe für Überschriften: Stapeln Sie einige Ebenen ohne Unschärfe mit gestuftem Versatz (die Retro-3D-Vorlage), um Hero-Titeln einen Letterpress- oder Vintage-Poster-Look zu geben.
Leuchteffekte: Nutzen Sie die Neon-Glow-Vorlage für Dark-Mode-Landingpages, Stream-Overlays und Game-UIs — und passen Sie den Farbton an Ihre Palette an.
Lesbarer Text auf Bildern: Ein subtiler dunkler Schatten hinter weißem Text hält Bildunterschriften über Fotos lesbar — ganz ohne schwere Abdunklung.
Skeuomorphe UI: Die Präge-Vorlage simuliert eingedrückten Text in Werkzeugleisten und Schaltflächen im Stil physischer Paneele.

Text-Shadow-Generator