CSS Code: Schrift mit Farbverlauf versehen

Du möchtest deine Überschriften mit einem Farbverlauf versehen? In diesem Tutorial zeigen wir dir, wie das mit CSS funktioniert.

CSS Code: Schrift mit Farbverlauf versehen
Inhaltsverzeichnis

In einigen Situationen macht es Sinn (oder ist gewünscht), sein Bild, das man in der Desktop-Ansicht in voller Breite anzeigen lassen möchte, auf Mobil jedoch proportional deutlich kleiner anzeigen zu lassen. In diesem Artikel erfährst du, wie du mit einem einfachen CSS Code genau das erreichen kannst.

 

CSS TUTORIAL

Headlines und andere Texte mit Farbverlauf versehen

  1. Erstelle einen Text oder eine Headline, die du mit einem Farbverlauf versehen möchtest.
  2. Öffne im FunnelBuilder im Text-Element den Tab "CSS" und füge den untenstehenden CSS Code ein.
  3. Ändere am Code jeweils nur die 2 Verlaufsfarben rgba(127,164,236,1) und rgba(56,83,134,1). 
  4. Sobald die Farben für dich passen, speichere deine Funnelseite und fertig!

 

CSS Code: Textfarbe in Verlauf ändern

Nutze den folgenden Code an allen Stellen, an denen du deiner Schrift einen Farbverlauf geben möchtest.

-webkit-text-fill-color: transparent; background: linear-gradient(0deg, rgba(127,164,236,1) 0%, rgba(56,83,134,1) 100%); -webkit-background-clip: text;

 

Hinweis: Klicke auf den Code um ihn automatisch in die Zwischenablage zu kopieren.

DEINE IDEEN. DEINE KI. DEIN COCKPIT.

Mit KI schneller starten.
Mach jetzt endlich mehr aus deinem Online-Marketing.

Erstelle Seiten mit dem AI PageBuilder und verfeinere sie im Chat mit dem AI PageBot. Oder verbinde Codex, ChatGPT und Claude über MCP direkt mit deinem FunnelCockpit.

  • Seiten mit KI erstellen
  • Deine Lieblings-KI per MCP verbinden
Jetzt 14 Tage für 1 € testen Alle Tarife im Überblick. Finde deinen passenden Plan.
AI PageBuilder+AI PageBot+MCP+Marketing-ToolsEin Cockpit.