CSS Text-Shadow-Generator
Kostenloser Online-Text-Shadow-Generator. Stapeln Sie mehrere Schattenebenen mit Versatz, Unschärfe, Farbe und Deckkraft, testen Sie Vorlagen wie Neon, 3D oder Retro und kopieren Sie das CSS sofort.
Was ist die CSS-Eigenschaft text-shadow?
text-shadow fügt den Glyphen eines Textes Schatteneffekte hinzu. Jeder Schatten wird durch einen horizontalen Versatz, einen vertikalen Versatz, einen optionalen Unschärferadius und eine Farbe definiert, und mehrere Schatten lassen sich in einem einzigen kommagetrennten Wert zu reichhaltigen Effekten kombinieren.
Wie funktionieren mehrere Schattenebenen?
Die Ebenen werden in Deklarationsreihenfolge von unten nach oben gezeichnet, der erste Schatten der Liste liegt also oben auf. Dieser Generator erlaubt das Hinzufügen, Entfernen, Aktivieren und Deaktivieren von Ebenen, jede mit eigenem Versatz, Unschärfe, Farbe und Deckkraft, um Effekte wie Neon oder 3D zu stapeln.
Was bedeuten X-Versatz, Y-Versatz und Unschärfe?
Der X-Versatz bewegt den Schatten nach links oder rechts der Glyphen, der Y-Versatz nach oben oder unten, und der Unschärferadius weicht seine Kanten auf: 0 ergibt eine harte Kante wie bei Retro oder Kontur, größere Werte verteilen die Farbe wie ein Glühen.
Wie erstelle ich einen Neon-Leuchteffekt?
Verwenden Sie die Vorlage Neon oder konfigurieren Sie mehrere Ebenen mit Versatz null, derselben leuchtenden Farbe und zunehmenden Unschärfewerten, z. B. 0 0 3px, 0 0 8px und 0 0 20px. Gestapelte Höfe simulieren das Leuchten einer Neonröhre.
Beeinflusst text-shadow die Renderleistung?
Einige statische Ebenen sind günstig, doch Text mit vielen großflächig unscharfen Schatten ist teurer neu zu zeichnen. Schwere Schatten auf langen Absätzen oder eine permanente text-shadow-Animation kann auf schwachen und mobilen Geräten Bilder auslassen lassen; bevorzugen Sie kurze Überschriften, mäßige Unschärfe oder animieren Sie stattdessen die Deckkraft.
Wie mache ich einen Schatten halbtransparent?
Jede Ebene hat einen Deckkraft-Regler, der die gewählte Farbe in rgba-Notation umwandelt, z. B. rgba(0, 0, 0, 0.5). Halbtransparente Schatten verschmelzen mit jedem Hintergrund, was die Vorlage Papier für den weichen Letterpress-Look nutzt.
Was ist der Unterschied zwischen text-shadow und box-shadow?
text-shadow wirkt auf die Glyphenformen des Textes und hat keine Ausbreitungs- oder Inset-Werte, während box-shadow das rechteckige Element umgibt. Sie teilen die Versatz- und Unschärfe-Syntax, können einander aber nicht ersetzen.
Welche Browser unterstützen text-shadow?
text-shadow wird von allen modernen Browsern unterstützt, darunter Chrome, Firefox, Safari, Edge und Opera, und ist seit über einem Jahrzehnt präfixfrei und stabil. Mehrschichtige Schatten funktionieren überall gleich.
Wird das Eingegebene an einen Server übertragen?
Nein. Der Vorschautext und alle konfigurierten Ebenen bleiben in Ihrem Browser, das CSS wird lokal auf der Seite erzeugt. Nichts geht übers Netzwerk, das Tool funktioniert nach dem Laden also auch offline.
So verwenden Sie CSS Text-Shadow-Generator
Entwirf CSS-Textschatten, indem du Ebenen stapelst, statt einen einzelnen Versatz zu raten. Jede Änderung wird auf großem Live-Vorschautext gerendert, und das CSS wird lokal in deinem Browser erzeugt.
- Tippe eigene Worte ins Vorschautext-Feld, um den Effekt an echtem Text zu testen.
- Probier eine Vorlage: Neon, Papier, 3D, Retro, Leuchten oder Kontur lädt fertige Ebenen.
- Stelle Versatz X, Versatz Y, Unschärfe, Farbe und Deckkraft jeder Ebene mit ihren Reglern ein.
- Nutze Ebene hinzufügen, um mehr Schatten zu stapeln, entticke eine Ebene, um sie zu deaktivieren, oder lösche sie über das Mülleimer-Symbol.
- Kopiere die erzeugte text-shadow-Regel und füge sie in dein Stylesheet ein.
Neonleuchten wirken am besten mit drei oder vier Ebenen derselben Farbe und wachsender Unschärfe — halte die Versätze bei null und lass die Unschärfe die Arbeit machen.
Verwandte Tools
- CSS Box Shadow Generator Kostenloser Online-CSS-Box-Shadow-Generator. Erstellen Sie visuell schöne Schatten mit einstellbarem Versatz, Unschärfe, Ausbreitung, Farbe und Inset. Live-Vorschau und sofortiges Code-Kopieren.
- CSS-Gradient-Generator Erstellen Sie visuell atemberaubende CSS-Gradienten. Generieren Sie lineare, radiale und konische Gradienten mit mehreren Farbstops, Winkeln und Positionen. Kopieren Sie produktionsreifen CSS-Code sofort.
- Schriftarten-Generator Kostenloser Schriftarten-Generator mit 28 Unicode-Stilen. Erstellen Sie fetten, kursiven, gotischen und eingekreisten Text für Instagram-Bios, TikTok, WhatsApp und Spielernamen.
- Border Radius Generator Kostenloser Online Border-Radius-Generator. Ziehen Sie 8 Griffe oder wählen Sie eine Blob-Vorlage, um organische CSS-Formen zu erstellen und den Code sofort zu kopieren.
- Farbkonverter Kostenloser Online-Farbkonverter. Konvertieren Sie HEX, RGB, HSL, HSV Formate sofort mit visueller Farbauswahl. 100% privat, läuft in Ihrem Browser.
- CSS Easing Generator Kostenloser Online-CSS-Easing-Generator. Ziehen Sie die cubic-bezier-Kontrollpunkte auf einer interaktiven Kurve, wählen Sie aus 18 Vorlagen, sehen Sie eine Ball-Loop-Animation und kopieren Sie die Timing-Funktion sofort.
- CSS Clip-Path Generator Kostenloser Online-CSS-Clip-Path-Generator. Gestalten Sie Polygon-, Kreis-, Ellipsen- und Inset-Formen mit verschiebbaren Punkten, Live-Vorschau und Codekopieren mit einem Klick.
- CSS Beautifier CSS-Code sofort formatieren und verschönern. Minifiziertes CSS in lesbaren, gut eingerückten Code umwandeln mit anpassbaren Optionen.