Text-Shadow-Generator
Mehrschichtige Textschatten visuell erstellen und das CSS kopieren
Klicken Sie auf eine Ebene, um sie zu bearbeiten; weiter vorn stehende Ebenen werden im CSS oben gezeichnet.
Textschatten sind eine der günstigsten Möglichkeiten, Überschriften ohne Bilder oder Filter Tiefe, Leuchten oder Lesbarkeit zu geben. Dieser Generator lässt Sie Schatten Ebene für Ebene aufbauen, Versätze, Unschärfe, Farbe und Deckkraft an lebendigen Hell- und Dunkel-Vorschauen abstimmen und dann eine saubere text-shadow-Deklaration kopieren. Fünf Vorlagen decken die Effekte ab, nach denen die meisten greifen, und jede Ebene ist umsortierbar, sodass Sie genau steuern, was oben liegt.
Verwendung
- Einen Ausgangspunkt wählen. Wählen Sie Subtil, Harte Kontur, Neon Glow, Retro 3D oder Prägung, um einen abgestimmten Stapel zu laden, oder behalten Sie den einzelnen weichen Standardschatten.
- Eine Ebene auswählen. Klicken Sie auf eine Zeile in der Ebenenliste; die ausgewählte Zeile wird umrandet und ihre Werte in den Editor geladen.
- Feinabstimmen. Bewegen Sie die Regler für Versatz X, Versatz Y und Unschärfe (oder tippen Sie exakte Zahlen ein) und legen Sie dann Farbe und Deckkraft fest.
- Stapeln und umsortieren. Fügen Sie Ebenen für mehr Tiefe hinzu und verschieben Sie eine Ebene mit den Pfeilen nach oben oder unten. Die Reihenfolge ist die Zeichenreihenfolge.
- Beide Themes prüfen. Wechseln Sie zwischen hellem und dunklem Vorschauhintergrund und ziehen Sie den Schriftgrößenregler von 24 px bis 96 px.
- Kopieren. Die Ausgabe ist eine sofort einfügbare
text-shadow: ...;-Deklaration.
Die Stapelreihenfolge-Regel
Das mit Abstand Wichtigste, was man über text-shadow verstehen muss, ist: frühere Ebenen liegen oben. In der Vorlage Neon Glow ist Ebene 1 0px 0px 4px — ein enger, heller Kern — und Ebene 4 ist 0px 0px 56px, ein weiter, blasser Hof. Würde man sie vertauschen, läge der weite Hof über dem Kern und wüsche ihn aus. Dieselbe Logik trägt die Vorlage Retro 3D, bei der zunehmend dunklere Kopien pixelweise weiter nach unten rechts wandern; die hellste Kopie steht zuerst und bleibt oben sichtbar.
Versätze werden von der ursprünglichen Textposition aus gemessen: ein positives x verschiebt den Schatten nach rechts, ein positives y nach unten. Ein Versatz von null mit positiver Unschärfe erzeugt ein auf die Glyphen zentriertes Leuchten, während ein kleines positives y mit mäßiger Unschärfe den klassischen erhabenen Buchstabenlook ergibt. Die Unschärfe steuert, wie weit die Farbe nach außen blutet; bei null ist der Schatten ein hartkantiges Duplikat genau in Glyphengöße. Die Deckkraft wird getrennt vom Alpha-Wert der Farbe geführt, weil der Farbwähler deckende Hex-Werte ausgibt und der Generator sie für Sie in rgba() umwandelt. Wenn Sie das Ergebnis von Hand ändern, behalten Sie die Einheiten: text-shadow: 0 2px 4px #000 ist gültig, text-shadow: 0 2 4 black nicht.
Die fünf Vorlagen im Detail
| Vorlage | Ebenen | Was sie erzeugt |
|---|---|---|
| Subtil | 1 | 0px 2px 4px Schwarz bei 25 % — ein weicher Schlagschatten für Text oder Überschriften |
| Harte Kontur | 4 | Schwarze Kopien ohne Unschärfe bei -1/0, +1/0, 0/-1, 0/+1 px — eine lesbare Kontur |
| Neon Glow | 4 | Derselbe Cyan-Ton mit 4, 12, 28 und 56 px Unschärfe, Deckkraft gestuft 90→60 % |
| Retro 3D | 5 | Dunkelrote Kopien in 1–5 px nach unten rechts gestuft, ohne Unschärfe |
| Prägung | 2 | Weiß bei 0 -1px darüber plus eine blasse dunkle Linie bei 0 1px 1px darunter |
Beginnen Sie mit der nächstliegenden Vorlage und passen Sie an, statt aus einem leeren Stapel zu bauen. Für einen weichen UI-Schatten ist die Vorlage Subtil bei 25 % bereits nah dran; erhöhen Sie den y-Versatz in Richtung 4–6 px und die Unschärfe auf 8–12 px für mehr Abhebung. Für eine Kontur, die über einem Foto lesbar bleibt, nutzen Sie Harte Kontur und setzen Sie die Farbe auf einen dunklen Ton des Hintergrunds statt auf reines Schwarz. Für ein Leuchten halten Sie die Versätze bei null und variieren nur Unschärfe und Deckkraft, und halten Sie die Farbe gesättigt — entsättigte Leuchtfarben wirken wie Nebel. Der Retro-3D-Stapel ist die eine Vorlage, bei der ein Wechsel der Farbe zur Markenpalette am meisten zählt, da seine fünf Ebenen in gleichmäßigen Schritten von hell nach dunkel laufen sollten.
Praxisbeispiel: Die Ausgabe lesen
Das Laden von Neon Glow erzeugt exakt diese Deklaration:
text-shadow: 0px 0px 4px rgba(15, 240, 252, 0.9), 0px 0px 12px rgba(15, 240, 252, 0.8), 0px 0px 28px rgba(15, 240, 252, 0.7), 0px 0px 56px rgba(15, 240, 252, 0.6);
Laden Sie stattdessen Harte Kontur, lassen die Ebenen ohne Unschärfe die Unschärfe-Komponente weg und ergeben -1px 0px #000000, 1px 0px #000000, 0px -1px #000000, 0px 1px #000000. Die Standardebene ist 0px 2px 4px rgba(0, 0, 0, 0.3), und eine Erhöhung ihrer Deckkraft auf 100 % schaltet die Farbe auf schlichtes #000000 um.
Randfälle und Grenzen
- Mehrere Schatten sind teuer. Jede Ebene ist ein zusätzlicher Durchlauf über jede Glyphe, ein fünfschichtiger Schatten auf einem langen Absatz kostet also spürbar mehr als einer auf einer kurzen Überschrift. Halten Sie schwere Stapel für Auszeichnungstext vor.
- Die Unschärfe ist auf 100 px und die Versätze auf ±50 px begrenzt. Werte außerhalb dieser Bereiche werden gekappt, nicht abgelehnt.
- Die Farbeingabe beschränkt sich auf Hex. Der Wähler gibt
#rrggbbaus; die Logik normalisiert drei- oder sechsstellige Hex-Werte und fällt bei allem Ungültigen auf#000000zurück. - Kein Ausdehnungswert und kein inset. Wenn Sie die Box des Elements statt seiner Buchstaben schattieren müssen, sind Sie bei der falschen Eigenschaft und beim falschen Tool.
- Kontrast bleibt wichtig. Ein Schatten kann Text schwerer lesbar machen; prüfen Sie das Ergebnis über dem echten Hintergrund, nicht nur an den Vorschaufeldern.
- Große Unschärfen verschmieren kleinen Text. Ein breiter dunkler Schatten hinter kleinem hellem Text senkt den Kontrast, statt ihn zu heben — testen Sie also in der kleinsten Größe, die Sie tatsächlich ausliefern.
- Die Vorschau zeigt eine Textzeile. Lange Zeichenketten, die umbrechen, können Schichtungs- oder Überlappungsprobleme offenbaren, die das einzeilige Beispiel verbirgt — prüfen Sie also in Ihrem eigenen Markup.
Verwandte Tools
- CSS Box-Shadow-Generator — Mehrschichtige Boxschatten mit Live-Vorschau gestalten.
- CSS Flexbox-Generator — Flexbox-Layouts visuell gestalten und das CSS kopieren.
- CSS Gradient-Generator — Eigene CSS-Verläufe für Ihre Layouts erstellen.
Häufig gestellte Fragen
Warum gibt es keinen Ausdehnungsradius und kein inset wie bei box-shadow?
Weil CSS text-shadow beides nicht kennt. Die Eigenschaft text-shadow akzeptiert pro Ebene nur einen X-Versatz, einen Y-Versatz, einen optionalen Unschärferadius und eine Farbe; anders als box-shadow gibt es keinen Ausdehnungswert und kein inset-Schlüsselwort, und ein negativer Unschärfewert wird nie akzeptiert. Der Generator hält sich an das, was der Browser tatsächlich rendert, sodass alles, was Sie kopieren, gültiges CSS ist.
Welche Ebene liegt oben, wenn ich mehrere stapel?
Die erste Ebene in der kommagetrennten Liste wird zuletzt gezeichnet und liegt damit über den nachfolgenden Ebenen. Deshalb listet die Vorlage Neon Glow ihre enge 4-px-Unschärfe zuerst und den weiten 56-px-Hof zuletzt — der helle Kern sitzt über der blassen Streuung. Mit den Pfeiltasten ordnen Sie Ebenen neu und sehen die Vorschau sofort aktualisiert.
Wie landet die Deckkraft in der CSS-Ausgabe?
Eine Ebene mit 100 % Deckkraft wird als schlichter Hex-Wert wie #000000 ausgegeben. Jeder Wert darunter wird in rgba() umgewandelt, zum Beispiel wird #0ff0fc bei 90 % zu rgba(15, 240, 252, 0.9). Der Alpha-Wert wird auf zwei Nachkommastellen gerundet, sodass kleine Reglerbewegungen saubere, lesbare Ausgaben erzeugen statt langer Fließkommazahlen.
Was passiert, wenn ich alle Ebenen lösche?
Der Generator lässt Sie nie mit einem leeren Stapel zurück. Das Entfernen der letzten Ebene fügt sofort eine neue Standardebene ein (0px 2px 4px bei 30 % schwarzer Deckkraft), sodass Vorschau und kopiertes CSS immer mindestens einen gültigen Schatten enthalten. Diese Standardebene ist auch das, womit Sie beim Laden der Seite beginnen.
Kann ich den Schatten mit einem Selektor oder einer Klasse exportieren, oder nur die Eigenschaft?
Das Ausgabefeld liefert nur die Deklaration: text-shadow: ...; mit den Ebenen in Stapelreihenfolge kommagetrennt. Fügen Sie sie in die Regel Ihrer Wahl ein — eine Überschriftenklasse, eine Schaltfläche oder eine Utility-Schicht — und ergänzen Sie Ihren eigenen Selektor. Ebenen ohne Unschärfe werden ohne Unschärfe-Komponente geschrieben, damit die Ausgabe so kurz bleibt, wie es der Effekt erlaubt.
Beeinflussen die Vorschau von 24 px bis 96 px und der Hell/Dunkel-Umschalter mein CSS?
Nein, beides sind reine Vorschau-Steuerelemente. Eine andere Schriftgröße oder ein anderer Hintergrund rendert nur den Beispieltext neu, denn derselbe Schatten kann bei 96 px auf Dunkel dramatisch und bei 24 px auf Weiß nahezu unsichtbar wirken. Ihr kopierter text-shadow-Wert enthält weder Schriftgröße noch Hintergrund — beides gehört zu dem Element, auf das Sie ihn anwenden.
Geprüft vom HandyTools-Hub-Team · Zuletzt aktualisiert