Textdekoration-Generator

• Sofortige Live-Vorschau: Sehen Sie Änderungen an der Textdekoration in Echtzeit, während Sie Stil, Farbe, Dicke und Versatz anpassen. Unser Generator aktualisiert die Vorschau sofort - kein Knopf nötig. Geben Sie Ihren eigenen Vorschautext ein, um genau zu sehen, wie die Dekoration mit Ihrem Inhalt wirkt.
• Vollständige CSS-Eigenschaftsunterstützung: Steuern Sie jede CSS text-decoration-Eigenschaft: Linie (Unterstreichung, Überstreichung, Durchstreichung), Stil (durchgezogen, doppelt, gepunktet, gestrichelt, gewellt), Farbe, Dicke (1-10 px) und Unterstreichungsversatz (0-20 px). Der Generator gibt sowohl einzelne Eigenschaften als auch die Kurzschreibweise aus.
• 100 % privat - keine Server-Uploads: Die gesamte Generierung des Textdekorations-CSS erfolgt lokal in Ihrem Browser. Ihr Text und Ihre Designentscheidungen verlassen niemals Ihr Gerät und werden nie an einen Server gesendet - völlig sicher für Kundenprojekte und proprietäre Inhalte.
• Kostenlos und ohne Anmeldung: Generieren Sie unbegrenzt Textdekorations-CSS ohne Anmeldung, Abo und Nutzungsobergrenzen. Unser Generator ist dauerhaft völlig kostenlos, ohne Begrenzung der Nutzungshäufigkeit.

CSS-Textdekoration fügt Text visuelle Linien hinzu: Unterstreichungen darunter, Überstreichungen darüber und Durchstreichungen in der Mitte. Die Kurzeigenschaft text-decoration steuert Linientyp, Stil, Farbe und Dicke in einer einzigen Deklaration. Modernes CSS unterstützt außerdem text-underline-offset und text-decoration-thickness für präzise Kontrolle. Unser Generator macht es einfach, diese Eigenschaften visuell zu erkunden und produktionsreifes CSS zu erhalten.

1. Voreinstellung wählen oder selbst anpassen: Durchsuchen Sie 8 Voreinstellungen für gängige Textdekorationsstile (klassische Unterstreichung, doppelte Unterstreichung, gewellt, gestrichelte Überstreichung, gepunktete Durchstreichung, dicker Versatz, dünn gewellt). Klicken Sie auf eine Voreinstellung, um sie sofort anzuwenden.
2. Jede Eigenschaft anpassen: Wählen Sie die Dekorationslinie (Unterstreichung, Überstreichung, Durchstreichung oder keine), eines von 5 Stilen (durchgezogen, doppelt, gepunktet, gestrichelt, gewellt), eine beliebige Farbe über den Farbwähler oder Voreinstellungen, passen Sie die Dicke mit einem Schieberegler an (1-10 px) und legen Sie den Unterstreichungsversatz fest (0-20 px oder auto). Geben Sie Ihren eigenen Vorschautext ein und passen Sie Schriftgröße und -gewicht an Ihren Designkontext an.
3. CSS kopieren: Klicken Sie auf „CSS kopieren“, um den vollständigen CSS-Block in die Zwischenablage zu kopieren. Er enthält sowohl einzelne Eigenschaftsdeklarationen als auch die Kurzschreibweise - bereit zum Einfügen in Ihr Stylesheet.

• text-decoration-line: Legt fest, welche Linie gezeichnet wird. Verwenden Sie underline für Links und Betonung, overline für dekorative Überschriften, line-through für Durchstreicheffekte (Sonderpreise, erledigte Aufgaben) oder none zum Entfernen der Dekoration.
• text-decoration-style: Steuert den visuellen Stil der Linie. Wählen Sie solid für Standardlinien, double für zwei parallele Linien, dotted oder dashed für subtile Effekte oder wavy für verspielte oder fehleranzeigende Dekorationen.
• text-decoration-color: Legt die Farbe unabhängig von der Textfarbe fest. So können Sie eine Akzentfarbe der Marke für Unterstreichungen verwenden, während der Fließtext in einer neutralen Farbe bleibt - ein gängiges Designmuster, das unser Generator erleichtert.
• text-decoration-thickness: Steuert die Linienbreite (1-10 px). Dickere Linien sind sichtbarer und können als Designelement dienen, während dünne Linien subtil und unaufdringlich sind. Nutzen Sie den Schieberegler in unserem Generator, um die perfekte Balance zu finden.
• text-underline-offset: Steuert den Abstand zwischen Textgrundlinie und Unterstreichung. Ein größerer Versatz schafft mehr Luft zwischen Text und Linie und verbessert die Lesbarkeit bei dicken Unterstreichungen. Auf auto setzen für die Browser-Voreinstellung.

Die Kurzform text-decoration wird in allen Browsern unterstützt. Einzelne Eigenschaften wie text-decoration-thickness und text-underline-offset werden in Chrome 87+, Firefox 70+, Safari 12.1+ und Edge 87+ unterstützt. Der gewellte Stil hat breite Unterstützung in allen modernen Browsern. Für maximale Kompatibilität bietet unser Generator sowohl die einzelne Eigenschaftssyntax als auch das Kurzform-Äquivalent.