# CSS-Verlaufstext-Generator

Generiert CSS-Verlaufstexteffekte

> Kanonische Seite: https://elysiatools.com/de/tools/css-gradient-text

- **Kategorie:** Design

- **Schlagwörter:** css, verlauf, text, farbe, generator

## Überblick

Der CSS-Verlaufstext-Generator erstellt schnell CSS-Code für Texte mit Farbverläufen. Geben Sie Text, Farben und Verlaufsrichtung ein, um den Code für ansprechende Designeffekte zu erhalten.

## Eingaben

- **Text** (text): Gradient Text
- **Farben (mit Komma getrennt)** (text): #ff0080, #7928ca, #ff4d4d
- **Verlaufsrichtung (Grad)** (range)

## Wann verwenden

- Wenn Sie Website-Überschriften oder Buttons mit auffälligen Farbverläufen gestalten möchten.
- Beim Erstellen von Grafiken oder Social-Media-Inhalten, die lebendige Texteffekte benötigen.
- Zum schnellen Testen von Farbkombinationen und Verlaufsrichtungen ohne manuelles CSS-Schreiben.

## Funktionsweise

- Geben Sie den gewünschten Text in das Eingabefeld ein.
- Legen Sie die Farben für den Verlauf fest, getrennt durch Kommas (z.B. #ff0080, #7928ca).
- Wählen Sie die Verlaufsrichtung in Grad von 0 bis 360 aus.
- Der Generator erstellt den CSS-Code, den Sie kopieren und in Ihr Projekt einfügen können.

## Anwendungsfälle

- Gestaltung von hervorgehobenen Überschriften für Webseiten oder Landing Pages.
- Erstellung von einzigartigen Texteffekten für Logos oder Branding-Materialien.
- Schnelle Produktion von visuellen Inhalten für Marketingkampagnen oder Präsentationen.

## Häufig gestellte Fragen

### Welche Farbformate kann ich verwenden?

Sie können Hex-Farbcodes wie #ff0080 angeben, durch Kommas getrennt.

### Wie viele Farben sind im Verlauf möglich?

Sie können beliebig viele Farben hinzufügen, solange sie korrekt formatiert und durch Kommas getrennt sind.

### Was bedeutet die Verlaufsrichtung in Grad?

Die Richtung gibt die Winkelrichtung des Verlaufs an, wobei 0° nach oben und 90° nach rechts zeigt.

### Ist der generierte Code für alle Browser geeignet?

Der Code verwendet Standard-CSS, das von modernen Browsern unterstützt wird. Für ältere Browser können Präfixe nötig sein.

### Kann ich den Code direkt in mein Stylesheet einfügen?

Ja, der ausgegebene CSS-Code kann kopiert und in Ihre CSS-Datei oder inline-Stile integriert werden.

## Ähnliche Tools

- [CSS-Text-Schatten-Generator](https://elysiatools.com/de/tools/text-shadow-generator): Generiert CSS-Text-Schatten-Eigenschaften
- [Barcode-Batch-Generator](https://elysiatools.com/de/tools/barcode-batch-generator): Erzeugt stapelweise Code 128, EAN-13, UPC-A, ITF-14, QR Code und Data Matrix aus CSV oder mehrzeiligem Text mit PNG-ZIP- oder PDF-Ausgabe
- [Stereogramm-Generator](https://elysiatools.com/de/tools/image-stereogram): Erstellt 3D-Stereogramme aus Text - erstellt versteckte 3D-Bilder, die bei korrekter Betrachtung sichtbar werden
- [Kunst-QR-Code-Generator mit gestylten Modulen und Logo-Einbettung](https://elysiatools.com/de/tools/qr-code-art-styled-module-and-logo-embed-generator): Erzeugt Kunst-QR-Codes mit Markenfarben, Verläufen, abgerundeten oder Punkt-Modulen und zentriertem Logo — mit ISO-Masken-Strafaufschlüsselung, Modul-Metadaten und Reed-Solomon-Löschbudget-Urteil.
- [QR-Code-Generator](https://elysiatools.com/de/tools/qr-code-generator): Erstellt QR-Codes aus URLs oder Text mit anpassbarer Größe und Farben
- [CSS-Hintergrundfilter-Generator](https://elysiatools.com/de/tools/backdrop-filter-generator): Generiert CSS-Hintergrundfilter-Eigenschaften für Milchglas-Effekte
- [Lorem Ipsum Generator](https://elysiatools.com/de/tools/lorem-ipsum-generator): Generiert Platzhaltertextinhalt
- [Slug-Generator (mit Chinesisch-zu-Pinyin)](https://elysiatools.com/de/tools/slug-generator): Erzeugt saubere URL-Slugs aus beliebigem Text mit eingebauter Chinesisch-zu-Pinyin-Uwandlung. Führt Trennzeichen zusammen, wandelt in Kleinbuchstaben um und kürzt wortweise bei optionaler Maximallänge.

## Beispiele

- [Text-Beispiele mit Emojis](https://elysiatools.com/de/samples/text-with-emoji-samples): Mehrsprachiger Text mit verschiedenen Unicode-Emojis zum Testen der Emoji-Extraktion
- [Beispiele für Gemischten Chinesisch-Englischen Text](https://elysiatools.com/de/samples/text-chinese-english-mixed-samples): Beispieltextdateien mit gemischtem chinesisch-englischem Inhalt zum Testen von Tools für automatisches Spacing
- [Bulma CSS Framework Beispiele](https://elysiatools.com/de/samples/bulma): Bulma CSS-Framework-Beispiele einschließlich Spalten, Komponenten, Formular-Steuerelemente, Layout-System und moderne CSS-basierte Design-Muster
- [CSS-Selektor-Beispiele](https://elysiatools.com/de/samples/css-selectors): Sammlung von CSS-Selektor-Beispielen für Extraktions- und Analysetests

## Verwandte Inhalte

- [CSS-Arbeit, Layout und Kaskade](https://elysiatools.com/de/hubs/css-authoring-layout-and-cascade-workflows): Erstellen und prüfen Sie CSS mit Formatierung, Selektor-Diagnose, responsiven Snippets, visuellen Effekten und Render-Checks.