In diesem Artikel
Was CSS Text Shadow bewirkt
Die CSS-Eigenschaft text-shadow fügt Textzeichen Schatteneffekte hinzu. Jeder Schatten wird durch horizontalen Versatz, vertikalen Versatz, Weichzeichnungsradius und Farbe definiert. Anders als box-shadow folgt text-shadow der exakten Form jedes Zeichen-Glyphs und erzeugt so Effekte, die sich um die Buchstabenformen legen statt um rechteckige Kästen.
Sie können mehrere Schatten auf einem einzelnen Element stapeln, indem Sie sie mit Kommas trennen. Das ermöglicht komplexe Effekte wie Neon-Glühen, geprägte Schrift, 3D-Extrusionen und Feuertext – alles mit reinem CSS, ganz ohne Bilder oder Canvas. Mit dem Generator bauen und betrachten Sie diese geschichteten Schatten in einer visuellen Vorschau.
Den Text-Shadow-Generator verwenden
Der Generator bietet intuitive Steuerelemente zum Gestalten von Textschatten, ohne dass Sie sich die CSS-Syntax merken müssen. Sie können jeden Parameter in Echtzeit anpassen und das Ergebnis sofort an Ihrem Vorschautext sehen.
- Versatz-Steuerung – ziehen Sie Regler oder geben Sie exakte Pixelwerte für den horizontalen (X) und vertikalen (Y) Versatz ein, um den Schatten relativ zum Text zu positionieren
- Weichzeichnungsradius – erhöhen Sie die Weichzeichnung für sanfte, glühende Effekte oder belassen Sie sie bei null für scharfe, klare Schatten, die wie massive Duplikate wirken
- Mehrere Ebenen – fügen Sie mehrere Schattenebenen hinzu und ordnen Sie sie neu an, um komplexe zusammengesetzte Effekte wie Umrisse, Glühen und Tiefe zu erzeugen
Kostenlos testen – keine Registrierung erforderlich
Text-Shadow-CSS generieren →Kreative Texteffekte mit Text Shadow
Textschatten sind nicht nur für dezente Tiefeneffekte da. Durch die Kombination mehrerer Schattenebenen mit unterschiedlichen Versätzen, Weichzeichnungswerten und Farben lassen sich beeindruckende visuelle Effekte vollständig in CSS erzeugen.
- Neon-Glühen – verwenden Sie null Versatz mit großem Weichzeichnungsradius und einer leuchtenden Farbe (Cyan, Magenta, Limette), die in mehreren Ebenen mit zunehmender Weichzeichnung wiederholt wird, um das Glühen einer Neonröhre zu simulieren
- Prägung und Letterpress – kombinieren Sie einen hellen, leicht nach unten-rechts versetzten Schatten mit einem dunklen, leicht nach oben-links versetzten Schatten auf einem mittelgrauen Hintergrund, um einen in Metall gepressten Effekt zu erzeugen
- 3D-Extrusion – stapeln Sie viele Schatten mit ansteigenden Versätzen (1px 1px, 2px 2px, 3px 3px …) in allmählich dunkler werdenden Farben, um einen massiven dreidimensionalen Texteffekt zu erzeugen
Häufig gestellte Fragen
Beeinträchtigt text-shadow die Performance?
Einzelne Schatten haben eine vernachlässigbare Auswirkung auf die Performance. Das Stapeln vieler Schatten mit großen Weichzeichnungsradien (mehr als 10 Ebenen mit über 20px Weichzeichnung) kann jedoch zu Renderverzögerungen führen, besonders auf Mobilgeräten. Testen Sie komplexe Effekte auf den Zielgeräten und setzen Sie den Effekt eher sparsam bei Überschriften als bei Fließtext ein.
Welche Browser unterstützen text-shadow?
text-shadow wird von allen modernen Browsern hervorragend unterstützt, darunter Chrome, Firefox, Safari, Edge und mobile Browser. Es wird seit IE10 unterstützt und gilt als sicher, um ohne Fallbacks in Produktion eingesetzt zu werden.
Kann text-shadow mit CSS-Transitions animiert werden?
Ja. text-shadow lässt sich mit CSS-Transitions und Keyframe-Animationen vollständig animieren. Sie können sanft zwischen verschiedenen Schattenzuständen für Hover-Effekte, Ladeindikatoren oder aufmerksamkeitsstarke Animationen überblenden. Halten Sie die Anzahl der Schattenebenen zwischen den Zuständen konstant, um die geschmeidigsten Übergänge zu erhalten.