CSS Gradient Text Erstellen Sie Text mit Farbverlauf-Füllung mithilfe von CSS background-clip und text-fill-color.

🎨

CSS-Gradient-Text

Erstellen Sie Text mit Farbverlauf-Füllung mithilfe von CSS background-clip und text-fill-color.

Farbverläufe festlegen

Wählen Sie zwei oder drei Farben für den Textfarbverlauf und passen Sie den Winkel an.

Typografie anpassen

Stellen Sie die Schriftgröße und -gewichtung ein, um Ihren Designanforderungen zu entsprechen.

CSS kopieren

Vorschau des Farbverlaufs anzeigen und CSS mit background-clip-Eigenschaften kopieren.

Loading tool...

What Is CSS-Gradient-Text?

Das CSS-Gradienten-Text-Tool erstellt auffälligen Text mit Farbverläufen. Anstatt einer soliden Textfarbe wendet diese Technik einen Hintergrund mit Farbverlauf auf den Text an, indem die Eigenschaft background-clip: text zusammen mit -webkit-text-fill-color: transparent verwendet wird. Dadurch wird der Farbverlauf durch die Textzeichen sichtbar. Sie können zwei oder drei Farben für den Farbverlauf festlegen, den Winkel des Farbverlaufs anpassen und die Schriftgröße sowie das Schriftgewicht anpassen. Das Tool generiert alle notwendigen CSS-Code einschließlich Webkit-Präfixe für maximale Browser-Kompatibilität. Gradiententext ist beliebt für Überschriften, Hero-Bereiche und Markenelemente, bei denen Sie die Typografie hervorheben möchten.

Why Use CSS-Gradient-Text?

Unterstützung für 2 oder 3 Farbstopp-Farbverläufe
Einstellbarer Farbverlaufswinkel in jede Richtung
Schriftgröße und -gewichtungskontrollen für eine Feinabstimmung der Typografie
Generiertes CSS enthält alle notwendigen Webkit-Präfixe

Common Use Cases

Hauptüberschriften

Erstellen Sie auffällige Hauptüberschriften mit Farbverläufen.

Marken-Typografie

Wenden Sie Marken-Farbverlaufsfarben auf wichtige Textelemente für eine visuelle Identität an.

Funktionsüberschriften

Heben Sie Funktionsüberschriften mit farbigen Farbverlaufeffekten hervor.

Landingpage-CTAs

Machen Sie Call-to-Action-Texte mit lebhaften Farbverläufen auffällig.

Technical Guide

Die Technik des Gradiententexts verwendet drei CSS-Eigenschaften, die zusammenarbeiten. Zuerst legt background einen linearen Farbverlauf auf das Textelement fest. Zweitens beschneidet -webkit-background-clip: text (und die Standard-Eigenschaft background-clip: text) den Hintergrund auf den Bereich des Textinhalts. Drittens macht -webkit-text-fill-color: transparent (oder color: transparent) die Textfarbe durchsichtig, sodass der Farbverlauf-Hintergrund sichtbar wird. Der Farbverlauf kann jede CSS-Gradientenfunktion verwenden, einschließlich linear-gradient, radial-gradient oder conic-gradient. Damit die Technik funktioniert, muss das Textelement display: inline oder inline-block haben. Die Webkit-Präfixe sind für Safari und ältere Chrome-Versionen erforderlich. Für die Barrierefreiheit sollten die Farben des Farbverlaufs einen ausreichenden Kontrast zum Hintergrund aufweisen. Screenreader lesen den Text trotz der visuellen Effekte normal weiter.

Tips & Best Practices

1
Verwenden Sie fette, große Schrift für den effektivsten Farbverlaufeffekt
2
Wählen Sie Farben mit gutem Kontrast zueinander
3
Fügen Sie eine dritte Farbe hinzu, um komplexere, regenbogenähnliche Effekte zu erzielen
4
Testen Sie gegen Ihren Seitenhintergrund, um Lesbarkeit sicherzustellen

Related Tools

CSS-Gradient-Generator

Erstellen Sie schöne lineare, radiale und konische CSS-Gradients mit mehreren Farbstopps und Winkelkontrolle.

🎨 CSS & Design

CSS-Text-Schatten-Generator

Erstellen Sie CSS-Text-Schatten mit visuellen Steuerelementen für Versatz, Unschärfe, Farbe und Deckkraft.

🎨 CSS & Design

Typographieskalen-Generator

Erstellen Sie eine modulare Typographieskala mit anpassbarer Basisgröße, Verhältnis und Einheiten.

🎨 CSS & Design

CSS-Schaltflächen-Generator

Entwerfen Sie benutzerdefinierte CSS-Schaltflächen mit Farben, Abständen, Rändern, Schatten und Hover-Effekten.

🎨 CSS & Design

Frequently Asked Questions

Q Funktioniert der Farbverlaufstext in allen Browsern?

Ja, mit Webkit-Präfixen funktioniert er in allen modernen Browsern, einschließlich Safari, Chrome, Firefox und Edge.

Q Kann ich mehr als zwei Farben verwenden?

Ja, klicken Sie auf "Hinzufügen" unter Farbe 3, um einen dritten Farbverlauf hinzuzufügen. Sie können weitere Farben manuell im CSS hinzufügen.

Q Ist der Farbverlaufstext zugänglich?

Bildschirmlesegeräte lesen den Text normal. Stellen Sie sicher, dass die Farbverlaufsfarben einen ausreichenden Kontrast zum Seitenhintergrund bieten.

Q Warum wird mein Farbverlaufstext als einheitliche Farbe angezeigt?

Stellen Sie sicher, dass alle drei Eigenschaften festgelegt sind: Hintergrundfarbverlauf, background-clip: text und text-fill-color: transparent.

Q Kann ich den Farbverlaufstext animieren?

Sie können die background-position oder background-size animieren, um einen bewegten Farbverlaufeffekt auf dem Text zu erzeugen.

About This Tool

CSS-Gradient-Text is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.