CSS-Text-Farbverlauf-Generator

So funktioniert es

1. Farben wählen: Wählen Sie zwei oder mehr Farben für den Verlauf mit den Farbwählern aus.
2. Winkel und Stil festlegen: Wählen Sie linearen oder radialen Verlauf, passen Sie den Winkel an und fügen Sie optional eine Farbstopp-Position hinzu.
3. CSS kopieren: Der erzeugte CSS-Code nutzt background-clip: text und -webkit-background-clip: text für den Verlauftext-Effekt, kopieren Sie ihn direkt in Ihr Stylesheet.

Warum den CSS-Verlauftext-Generator nutzen?

Verlauftext ist einer der beliebtesten modernen CSS-Effekte für Überschriften, Logos und Call-to-Action-Texte. Ihn zu erreichen, erfordert eine bestimmte Kombination von CSS-Eigenschaften (background, background-clip, -webkit-text-fill-color), die leicht falsch zu schreiben ist. Dieser Generator behandelt die plattformübergreifende Syntax automatisch und bietet eine Live-Vorschau, sodass Sie Ihren Verlauf perfektionieren können, bevor Sie eine einzige Codezeile schreiben.

Funktionen

• Mehrfarbige Stopps: Fügen Sie so viele Farbstopps hinzu, wie Sie für komplexe Verlaufseffekte benötigen.
• Linear und radial: Wählen Sie zwischen direktionalen linearen und zentrierten radialen Verläufen.
• Winkelsteuerung: Stellen Sie den Verlaufswinkel von 0° bis 360° mit einem visuellen Wählrad ein.
• Live-Vorschau: Sehen Sie Ihren Verlauftext in Echtzeit mit Ihrem gewählten Beispieltext aktualisieren.
• Plattformübergreifendes CSS: Die Ausgabe enthält -webkit-Präfixe und Fallbacks für maximale Kompatibilität.

Häufige Fragen

Wie funktioniert CSS-Verlauftext?

CSS-Verlauftext entsteht, indem ein Verlauf als Element-Hintergrund angewendet wird, der Hintergrund mit background-clip: text auf die Textform beschnitten wird und die Textfarbe mit -webkit-text-fill-color: transparent (oder color: transparent) transparent gemacht wird. Nur der textförmige Ausschnitt des Verlaufs ist sichtbar.

Funktioniert Verlauftext in allen Browsern?

CSS-Verlauftext funktioniert in allen modernen Browsern, einschließlich Chrome, Firefox, Safari und Edge. Die Eigenschaft -webkit-background-clip: text wird gut unterstützt. Stellen Sie für sehr alte Browser immer einen Fallback in Volltonfarbe über die color-Eigenschaft bereit.

Kann ich das in jeder Schriftgröße verwenden?

Ja. Verlauftext skaliert perfekt mit der Schriftgröße, es ist reines CSS, kein Bild, also bleibt er in jeder Auflösung scharf, auch auf hochauflösenden Displays.

Eine kurze Geschichte von Verlauftext im Web

Verlauftext wurde im Web mit der WebKit-Eigenschaft -webkit-background-clip: text visuell möglich, einer experimentellen Safari/Chromium-Erweiterung, die vom WebKit-Team im Jahr 2008 als Möglichkeit vorgeschlagen wurde, die Glyphenformen von Text mit einem beliebigen Hintergrund (Verlauf, Bild, alles) zu füllen. Die Technik blieb jahrelang inoffiziell: Firefox lieferte unpräfixiertes background-clip: text erst in Version 49 (September 2016), und das CSS Backgrounds Module Level 4 formalisierte es ab etwa 2018 als W3C-Arbeitsentwurf. Die zugrundeliegende Verlaufssyntax reifte separat. Das CSS Images Module Level 3 (W3C-Empfehlung 2017) standardisierte linear-gradient() und radial-gradient() als Bildwerte erster Klasse; conic-gradient() folgte im Module Level 4 (Chrome 69 September 2018, Safari 12.1 März 2019, Firefox 83 November 2020). Die Kombination dieser beiden Spezifikationen macht heute eine einzeilige Verlaufsüberschrift möglich. Die Akzeptanz explodierte in der Entwicklergemeinschaft, als Tailwind CSS seine bg-clip-text-Utility-Klassen in v1.4 (2020) lieferte und Verlaufsüberschriften zu einer einsteckbaren Primitive machte. Die moderne Markenidentität verlässt sich nun auf Verlaufstext als visuelle Signatur: die «Bridges»-Reihe von Stripe, das Verlaufslogotype von Linear, die Landingpage von Vercel, das WWDC-Marketing von Apple und der Vorlagen-Shop von Notion verwenden alle die Technik. Das kombinierte background-clip: text + Verlaufsmuster hat das «PNG einer stilisierten Überschrift», das das Webdesign 2005-2015 dominierte, effektiv ersetzt und damit eine Kategorie von Barrierefreiheits- und Leistungsproblemen auf einen Schlag beseitigt.

Die Anatomie von CSS-Verlauftext

• Der Verlauf selbst. background-image: linear-gradient(90deg, #f00, #00f) legt den Hintergrund des Elements auf einen 90-Grad-Verlauf von Rot zu Blau fest. Der Verlauf kann linear (gerichtet), radial (zentriert), konisch (rotatorische Schwenkung) oder eine der wiederholenden Varianten sein. CSS-Verläufe sind Bildwerte, keine Farbwerte, was sie an eine Textform anpassbar macht.
• background-clip: text. Weist den Browser an, den Hintergrund nur innerhalb der Geometrie der gerenderten Glyphen zu rendern. Ohne diese eine Eigenschaft füllt der Verlauf die gesamte Elementbox; mit ihr ist der Verlauf auf die Textkontur beschränkt. Ursprünglich eine WebKit-Erweiterung mit Präfix als -webkit-background-clip: text, jetzt auch unpräfixiert in Firefox 49+ (2016) und Chromium-basierten Browsern.
• color: transparent oder -webkit-text-fill-color: transparent. Sobald der Hintergrund auf den Text zugeschnitten ist, hängt das sichtbare Ergebnis immer noch davon ab, welche Farbe der Text selbst über den Hintergrund malt. Das Setzen von color: transparent (oder dem präfixierten -webkit-text-fill-color: transparent) lässt den Verlauf durchscheinen. Ohne dies würde die solide Textfarbe einfach über den ausgeschnittenen Verlauf gemalt werden.
• Die -webkit--Präfixkette. Safari, die Plattform mit der meisten akkumulierten Präfixgeschichte, parst weiterhin die unpräfixierten Eigenschaften, aber die präfixierten Versionen bleiben aus historischen Gründen im Produktionscode. Die Ausgabe dieses Generators enthält sowohl background-clip: text als auch -webkit-background-clip: text, damit die Technik bis zu Safari 14 und allen Legacy-WebKit-basierten Browsern funktioniert.
• Verlaufstypen und Stopps. linear-gradient(angle, color1, color2, ...) geht in eine Richtung; radial-gradient(shape at position, ...) geht von einem Punkt aus; conic-gradient(from angle at position, ...) schwenkt wie ein Uhrzeiger herum. Jeder akzeptiert beliebig viele Farbstopps, mit expliziten Positionen (red 0%, blue 50%, green 100%) für eine feine Kontrolle darüber, wo jede Farbe beginnt und endet.

Reale Verwendungsmuster für Verlauftext

• Markenidentitäts-Überschriften. Die «Bridges»-Reihe von Stripe, der Produkthero von Linear, das «Develop. Preview. Ship.»-Banner von Vercel verwenden alle Verlaufstext als Markensignatur. Einfarbige Wortmarken wirken bei Early-Stage-SaaS veraltet, während Verlaufsüberschriften den visuellen Hinweis «im Jahr 2024 gebaut» tragen.
• Hero-Sektion-Überschriften. Die H1 auf einer Landingpage ist oft das einzige Textelement mit dem höchsten Designbudget. Verlauftext verleiht ihr visuelles Gewicht, ohne auf eine benutzerdefinierte Schriftdatei, ein SVG oder ein Hero-Bild zurückzugreifen, die alle Seitengewicht und Barrierefreiheitssorgen hinzufügen.
• Großzahlige Kennzahlenseiten. Preisseiten («$0 für den Anfang»), Statistik-Hervorhebungen («10× schneller») und Dashboard-Zusammenfassungen verwenden Verlauftext, um das Auge auf die Zahl selbst zu lenken. Der Verlauf ersetzt effektiv das Muster «farbiger Kreis hinter der Zahl» älterer Designs.
• Call-to-Action-Buttons. Ein subtiler Verlauf auf dem CTA-Text (statt auf dem Buttonhintergrund) wirkt raffinierter als eine solide Farbe und passt gut zu einer glasmorphischen oder neumorphischen Buttonoberfläche. Die Technik ist bei Fintech- und Designtool-Marken üblich.
• Navigations-Hervorhebungen. Ein aktiver oder Hover-Zustand auf einem Nav-Link kann Verlauftext verwenden, um visuelles Feedback ohne Unterstreichung oder Hintergrundfarbänderung zu liefern. Dieses Muster wird stark in Dokumentationsseiten verwendet (Stripe Docs, Tailwind Docs).
• Dark Mode und Brand-Bridge-Designs. Verlauftext funktioniert besonders gut auf dunklen Hintergründen, weil die gesättigten Farben hervorstechen, ohne gegen eine geschäftige helle Oberfläche zu konkurrieren. Viele Produkte behalten einfarbige Überschriften im Light Mode und wechseln im Dark Mode zu Verläufen (mit einem CSS-Variablen-Tausch).
• E-Commerce-Produkt-Hervorhebungen. Die Abzeichen «Sale», «Neu», «Limited Edition» und Produktuntertitel verwenden Verlauftext, um sich vom Fließtext zu differenzieren, ohne Symbol-Assets zu erfordern. Der Schaufenster-Editor von Shopify bietet Verlauftext 2024 als integrierte Option an.

Barrierefreiheits-Überlegungen

• WCAG 2.1 SC 1.4.3 Kontrast (Minimum). Das Erfolgskriterium verlangt mindestens 4,5:1 Kontrast zwischen Text und Hintergrund für normalen Text (3:1 für großen Text, definiert als 18pt+ oder 14pt fett). Verlauftext ist schwieriger zu bewerten, da das Kontrastverhältnis über den Verlauf variiert. Der sichere Ansatz: sicherstellen, dass die hellste Farbe Ihres Verlaufs immer noch das Verhältnis zum Hintergrund erfüllt. Tools wie WebAIM Contrast Checker und Stark in Figma können helfen.
• Wählen Sie zuerst die dunkelste Verlauffarbe. Beim Paaren eines Verlaufs mit einem hellen Hintergrund garantiert das Auswählen der hellsten Farbe des Verlaufs, um das 4,5:1-Verhältnis zu erreichen, dass der Rest des Verlaufs ebenfalls zugänglich ist. Dasselbe gilt umgekehrt für dunkle Hintergründe. WCAG 2.2 (Empfehlung Oktober 2023) verschärfte die Leitlinien zur visuellen Darstellung, einschließlich des Falls, in dem der Textkontrast über den Verlauf variiert.
• Screenreader sehen den Text unverändert. Da der Verlauf rein eine visuelle Stilisierung ist (background-clip, color), liest die Hilfstechnologie den gerenderten Textinhalt unabhängig davon, wie er gefärbt ist. Es gibt keine «Alt-Text»-Sorge bei Verlauftext, im Gegensatz zu rasterisiertem Bildtext oder SVG-Text-ohne-Textelement.
• prefers-reduced-motion. Animierte Verläufe (background-position-Übergänge, Farbzyklus-Animationen) sollten in @media (prefers-reduced-motion: no-preference) verpackt werden, damit Benutzer mit vestibulären Störungen oder Bewegungsempfindlichkeit einen statischen Verlauf sehen. Die CSS Working Group fügte die Media Query in 2017 hinzu; die Browser-Unterstützung ist seit 2020 universell.
• Browser-Zoom und Textgröße ändern. WCAG 2.1 SC 1.4.4 erfordert, dass Text bis zu 200% ohne Inhaltsverlust skalierbar ist. Verlauftext skaliert perfekt, weil er rein CSS-gerendert ist (keine Rasterisierung). Benutzer mit Sehschwäche, die Strg+/Cmd+-Zoom verwenden, sehen den Verlauf bei jedem Zoomlevel scharf bleiben.
• Druck-Stylesheets. Die meisten Browser verwerfen hintergrundgeclippte Farben beim Drucken, weil die gedruckte Seite Tinte auf Papier erwartet, und die Verlaufhintergründe verschwinden. Stellen Sie immer eine @media print-Überschreibung bereit, die eine solide color auf dem Verlauftext setzt, damit gedruckte Kopien lesbar bleiben. Viele Designer vergessen das; das Drucken einer Verlaufsüberschrift erzeugt oft unsichtbaren Text.
• Fallback-Farbkette. Setzen Sie immer zuerst eine solide color-Eigenschaft, dann fügen Sie color: transparent (oder -webkit-text-fill-color: transparent) hinzu, damit Browser ohne background-clip: text-Unterstützung (Legacy-IE, sehr alte Android-Browser) immer noch einfarbigen Text statt unsichtbaren Texts sehen. Die Ausgabe des Generators enthält diesen Fallback standardmäßig.

Weitere häufig gestellte Fragen

Warum gilt Verlauftext als moderne Markensignatur?

Zwei Gründe. Erstens, der technische Grund: Verlauftext wurde erst um 2017-2020 vollständig browserübergreifend, sodass Designs, die ihn verwenden, sichtbar den visuellen Hinweis «kürzlich gebaut» tragen, genauso wie flat design «2013» sagte oder Skeuomorphismus «2010» sagte. Zweitens, der kulturelle Grund: Stripe, Linear, Vercel und Apple WWDC popularisierten Verlauftext als Markenidentitätselement in der Welle 2020-2024 des Fintech- und Entwicklertool-Marketings. Die Übernahme derselben visuellen Sprache signalisiert die Zugehörigkeit zu dieser Designlinie.

Wie animiere ich einen Verlauftext-Effekt?

Die häufigste Technik animiert background-position auf einem überdimensionierten Verlauf. Setzen Sie background-size: 200% 200% und animieren Sie background-position von 0% 0% zu 100% 100% in einer 3-5-Sekunden-Schleife. Verpacken Sie die Keyframes immer in @media (prefers-reduced-motion: no-preference), damit Benutzer mit Bewegungsempfindlichkeit die statische Version sehen. Vermeiden Sie es, einzelne Farbstopps direkt zu animieren: CSS interpoliert derzeit nicht reibungslos zwischen Verlaufswerten über Browser hinweg, obwohl CSS @property (W3C-Empfehlungskandidat 2022) dies allmählich ermöglicht.

Können Suchmaschinen und Screenreader Verlauftext sehen?

Ja. Verlauftext ist reiner HTML-Text, der mit CSS gestaltet ist; das DOM enthält immer noch die tatsächlichen Zeichen. Google, Bing, Screenreader (NVDA, JAWS, VoiceOver) und jedes Textextraktionstool lesen den Inhalt genauso, als ob es einfacher einfarbiger Text wäre. Dies ist einer der Hauptgründe, warum Verlauf-CSS-Text das alte «PNG einer stilisierten Überschrift»-Muster ersetzt hat: diese Bilder waren ohne manuellen Alt-Text für Suche und Screenreader unsichtbar.

Funktioniert Verlauftext in HTML-E-Mails?

Meistens nicht. Outlook Desktop (Word-Rendering-Engine) entfernt background-clip; der Web-Client von Gmail unterstützt es inkonsistent; Apple Mail und moderne mobile Gmail-Clients rendern es normalerweise korrekt. Für E-Mail-Kampagnen ist der sicherere Ansatz, eine Fallback-Überschrift mit solider Farbe zu liefern und Verlauftext als «progressive Verbesserung» für Clients zu behandeln, die ihn unterstützen. Einige Teams komponieren die Überschrift vorab als PNG/SVG mit Alt-Text und akzeptieren den Barrierefreiheitskompromiss.

Welche Farben funktionieren am besten zusammen in einem Textverlauf?

Drei Muster dominieren. Analog (Farben nebeneinander auf dem Farbkreis, z.B. Blau → Lila → Pink) gibt sanfte, markenfreundliche Ergebnisse und ist die Voreinstellung für die meisten modernen Designsysteme. Komplementär (gegenüberliegend auf dem Farbkreis, z.B. Blau → Orange) erzeugt starken Kontrast, kann aber in langem Text grell wirken. Marken-getönt (Ihre primäre Markenfarbe mit subtiler Helligkeits-/Sättigungsvariation) erzeugt einen anspruchsvollen Effekt, der eher integriert als dekorativ wirkt. Vermeiden Sie es, mehr als drei Farben in einer einzigen Überschrift zu mischen; komplexe Verläufe sind besser für Symbole und grafische Elemente reserviert.