CSS-Textschatten-Generator

Einen Textschattenstapel erstellen

1. Bearbeite den Beispieltext sowie horizontalen und vertikalen Versatz, Unschärferadius, Farbe und Deckkraft jeder aktiven Ebene. Felder erlauben Hundertstel; Schieberegler erleichtern ganzzahlige Anpassungen.
2. Füge Ebenen hinzu, dupliziere, deaktiviere, entferne oder verschiebe sie. Die erste aktive Ebene steht vor den übrigen Schatten. Deaktivierte Ebenen behalten ihre Werte, fehlen aber im CSS.
3. Prüfe CSS und native Vorschau und wähle CSS kopieren. Nur die Schattendeklaration wird kopiert; Text, Typografie und Hintergrund dienen als Vorschaukontext.

Die erstellten Ebenen verstehen

Jede Ebene erzeugt horizontalen und vertikalen Versatz sowie nicht negative Unschärfe in CSS-Pixeln, gefolgt von einer ausdrücklichen RGBA-Farbe. Negative Werte verschieben nach links oder oben; null Unschärfe ergibt einen scharfen versetzten Schatten. Die Eigenschaft folgt den Glyphen statt einer rechteckigen Box.

Der erste Schatten wird vor den späteren gezeichnet, während diese äußeren Schatten hinter dem Text bleiben. Das Verschieben kann überlappende Farben ändern. Dieser Stapel unterscheidet sich von einer Filterkette, bei der jeder Schritt das vorherige Ergebnis erhält.

Die Schattendeckkraft wird zum Alpha der jeweiligen Farbe. Beispielsweise wird 37,5 % exakt zu 0.375, ohne Acht-Bit-Alphaquantisierung. Die Textdeckkraft ist eine getrennte Vorschaufarbeinstellung; transparenter Text kann weiterhin sichtbare Schatten haben.

Eine aktive transparente Ebene bleibt in der Deklaration. Alle Ebenen zu deaktivieren oder die Liste zu leeren ergibt text-shadow: none; und setzt geerbte Schatten ausdrücklich zurück. Eine leere ungültige Deklaration ersetzt dies nicht.

Beispiele zu Reihenfolge, Farbe und Transparenz

Die erste Beispielebene verwendet -3.25px horizontal, 6.5px vertikal und 0px Unschärfe mit #336699 bei 37 %. Ihre Kanäle sind 51, 102 und 153, ihr Alpha ist 0.37. Eine zweite orange Ebene verwendet 0px, -2px, 12px Unschärfe und 80 %.

Wird die orange Ebene nach vorn verschoben, ändert sich die kommagetrennte Reihenfolge ohne Änderung der Werte. Die Vorschau zeigt Überlappungen; das Werkzeug führt Duplikate nicht zusammen, sortiert Farben nicht und entfernt unsichtbare Ebenen nicht automatisch.

Eine transparente schwarze Ebene ohne Versatz und Unschärfe ist gültiges CSS, auch wenn kein Schatten sichtbar ist. Deaktivieren entfernt sie aus dem Stapel; ohne aktive Ebenen entsteht none.

Grenzen von Bearbeitung und Vorschau

Der Editor unterstützt höchstens zwölf Ebenen, Versatz von -64 bis 64 CSS-Pixeln, Unschärfe von 0 bis 64, sechsstellige Hexfarben und Deckkraft von 0 bis 100 % mit Hundertstelgenauigkeit. Er verwendet bewusst einen etablierten Teilumfang ohne Ausbreitung, inset, currentColor, beliebige Einheiten oder CSS-Import; neuere Spezifikationen behandeln zusätzliche Syntax.

Der Beispieltext verwendet einfachen Text und eine lokale Systemschrift. Ersatzschriften, Glyphen, Größe und Umbrüche beeinflussen das Aussehen. Nur text-shadow wird kopiert, daher kann eine andere Seite anders aussehen. Dies ist keine Zertifizierung für Kontrast, Lesbarkeit oder Pixelgleichheit.

Schatten vergrößern weder Textlayout noch scrollbaren Überlauf. Der gepolsterte Vorschaubereich ist eine Annäherung; Ränder können Unschärfe oder Versatz abschneiden. Scrollen garantiert nicht, dass alle Schattenpixel sichtbar werden.

Ungültige Werte aktiver Ebenen entfernen CSS und gestalteten Beispieltext bis zur Korrektur. Werte deaktivierter Ebenen werden bis zur erneuten Aktivierung ignoriert. Ungültige Vorschauoptionen verbergen nur den Beispieltext; leerer Text ist erlaubt.

Lokale Gestaltung ohne Textupload

Das Werkzeug fügt weder Upload, Fernschrift, gespeicherten Einstellungsverlauf, Link mit Eingaben noch Telemetrie mit Beispiel und Einstellungen hinzu. Kopieren erfolgt ausdrücklich. Bestehende Dienste, Erweiterungen und selbst aufbewahrte Kopien sind nicht durch ein allgemeines Datenschutz- oder Löschversprechen abgedeckt.