Stapeln Sie bis zu fünf text-shadow-Ebenen mit eigenem Versatz, Unschärfe, Deckkraft und eigener Farbe und prüfen Sie das Ergebnis an einem Beispieltext. „CSS kopieren“ legt den .shadowed-text-Block in die Zwischenablage.
Läuft lokal in deinem BrowserBis zu fünf text-shadow-Ebenen liegen übereinander in einer Vorschau: Text, Schriftgröße (24-120 px) und -stärke (400/600/800/900), Text- und Hintergrundfarbe sowie je Ebene horizontaler und vertikaler Versatz (je 60 px), Unschärfe (0-100 px), Deckkraft (0-1) und Farbe. Jeder Tastendruck zeichnet die Bühne neu, und im Codefeld steht genau die Zeichenkette, die „CSS kopieren“ in die Zwischenablage legt.
Die Seite startet mit zwei Ebenen: 2px 3px 0px rgba(54, 217, 138, 0.9) über 6px 8px 18px rgba(6, 29, 20, 0.55), auf VoriTools in 64 px und Stärke 800. Die Ausgabe ist ein .shadowed-text-Block mit einer Schattenzeile je Ebene; die erste Ebene der Liste liegt oben.
Die Ausgabe schreibt je Ebene eine Schattenzeile, mit Komma und Zeilenumbruch verbunden, unter dem festen Selektor .shadowed-text und zusammen mit der Farbe aus dem Farbfeld: color: #f7fff9 und text-shadow: 2px 3px 0px rgba(54, 217, 138, 0.9), 6px 8px 18px rgba(6, 29, 20, 0.55) auf einer unberührten Seite.
Die Reihenfolge ist sichtbar. Im Pixelversuch lagen zwei Ebenen mit demselben 12-px-Versatz übereinander und unterschieden sich nur in der Farbe: Rot an erster Stelle zeichnete rote Glyphenkanten, nach dem Tausch zeigte sich Blau - die erste Schattenzeile liegt oben.
Versatz ist auf 60 px begrenzt, Unschärfe auf 0-100 px, Deckkraft auf 0-1. Während des Tippens bleibt die Vorschau in diesen Grenzen; beim Verlassen ersetzt der begrenzte Wert den Feldtext, 999 im horizontalen Versatz speichert also 60 px und -10 in der Unschärfe speichert 0 px.
Das Farbfeld liefert einen Hex-Wert, das Deckkraftfeld wird zum Alphakanal: #123456 bei 0,5 ergibt rgba(18, 52, 86, 0.5). Unschärfe 0 druckt eine harte Kopie der Glyphen, wie es die Standardebene 2px 3px 0px tut.
Nur Schattenstapel und Textfarbe erreichen die Ausgabe: Vorschautext, Größe, Stärke und Bühnenhintergrund bleiben in der Bühne. Jede Ebene trägt eine einzelne Farbe - also kein Verlauf, kein Spread-Wert je Ebene, kein inset-Schatten und kein drop-shadow()-Filtermodus.
Alles läuft in der Seite: Tippen, Hinzufügen und Entfernen von Ebenen, „CSS kopieren“ und „Zurücksetzen“ lösten in der Messung null Netzwerkanfragen aus (en und ja); die einzige Fremdanfrage stammt vom geteilten Analyse-Tag. Der exportierte Selektor bleibt immer .shadowed-text.