Softonic

CSS-Textschatten-Generator

Schritt 1 / 2
CSS erstellen

Eine text-shadow-Deklaration in den DevTools nach Augenmaß zu erstellen, funktioniert zwar, wird aber zur Raterei, sobald du ein sanftes neumorphes Leuchten, einen zweilagigen Schlagschatten im Retro-Look oder eine scharfe 1px-Kontur auf einer großen Überschrift brauchst. Mit diesem Generator stellst du X-Offset, Y-Offset, Unschärferadius und eine RGBA-Farbe ein und kopierst eine fertig einsetzbare CSS-Zeile.

So baust du einen text-shadow

  1. 1

    Setze die Offsets

    X ist der horizontale Offset in Pixeln, Y ist vertikal. Positives Y schiebt den Schatten nach unten, negatives Y schiebt ihn nach oben.

  2. 2

    Wähle den Unschärferadius

    Unschärfe 0 ergibt eine harte Silhouette; höhere Werte lassen den Schatten verblassen. Typische sanfte Schatten verwenden 4–12px Unschärfe.

  3. 3

    Wähle eine Farbe

    Verwende einen RGBA-String, damit du die Opazität anpassen kannst. `rgba(0,0,0,0.35)` ist ein sicherer Standard für subtile Tiefe auf hellen Hintergründen.

  4. 4

    Kopiere die Deklaration

    Das Tool gibt `text-shadow: Xpx Ypx Blurpx color;` aus, füge es in den entsprechenden Selektor in deinem Stylesheet ein.

Textschatten-Rezepte, die tatsächlich gut aussehen

Ein Textschatten ist die Summe von vier Zahlen und einer Farbe. Denk daran, und du kannst fast jeden Effekt in einer Zeitschrift oder auf einer Landingpage nachstellen.

Spickzettel

Effekt Deklaration
Subtile Tiefe text-shadow: 0 1px 2px rgba(0,0,0,0.25);
Sanfter Schatten text-shadow: 0 4px 12px rgba(0,0,0,0.35);
1px Kontur text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
Retro doppelt text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
Neon Glühen text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

Mehrere Schatten übereinanderlegen

text-shadow akzeptiert eine durch Kommas getrennte Liste. Der Browser zeichnet nach dem Maleralgorithmus in der Reihenfolge des Codes, der letzte Schatten der Liste liegt hinter allen anderen. Nutze das, um Konturen zu imitieren (vier harte 1px-Schatten in den vier Richtungen) oder um Tiefe zu erzeugen, indem du einen scharfen Nahschatten und einen diffusen Fernschatten übereinanderlegst.

Wann man text-shadow weglassen sollte

  • Bei sehr kleinem Fließtext lässt eine Unschärfe über 2px die Glyphen verschwommen wirken. Bevorzuge -webkit-font-smoothing und stärkeren Kontrast.
  • Bei leistungskritischen Hero-Animationen vermeide mehr als drei gestapelte Schatten; jede Ebene zwingt den Browser, den Text neu zu rastern.
  • Wenn du einen Schatten mit engem Offset auf einem komplexen Pfad (Kurven, Drehungen) benötigst, ziehe ein SVG <filter> mit feDropShadow in Betracht, es folgt der Glyphen-Kontur genauer.

Häufig gestellte Fragen

Die Ausgabe ist aus Designgründen eine einzelne Schattenebene. Um Effekte zu schichten, führe den Generator mehrere Male aus und verknüpfe die Ergebnisse mit Kommas, zum Beispiel text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);.

text-shadow folgt den Glyphen-Konturen des gerenderten Textes. box-shadow folgt dem rechteckigen Rand des Elements. Sie verwenden ähnliche Parameter, rasterisieren jedoch gegen völlig unterschiedliche Formen.

Browser rasterisieren Textschatten gegen das Pixelraster des Geräts. Ein Schatten mit Unschärfe 0 auf einem 2x-Display wird an Subpixelpositionen gerendert und kann etwas weich aussehen. Eine Erhöhung der Unschärfe auf 1 bereinigt es normalerweise, ohne das visuelle Gewicht zu verändern.

Die von dir eingegebenen Werte werden an unseren Server gesendet, um die Deklaration zu erstellen, aber sie werden nicht gespeichert oder wiederverwendet. In der mehrstufigen Ansicht wandern sie im Seitenlink zwischen den Schritten; in der einseitigen Ansicht wird nichts aufbewahrt, aktualisiere die Seite und alles ist weg.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Telefonnummern prüfen

Prüfen Sie die Struktur von Telefonnummern nach Land und zeigen Sie Region, Typ sowie E.164-, internationale, nationale und RFC-3966-Formate an.

HAR-Datei-Viewer

HAR-Netzwerkaufzeichnungen lokal öffnen, Anfragen filtern, maskierte Header und Zeitwerte prüfen und bereinigte Zusammenfassungen exportieren.

Tool in anderen Sprachen verfügbar