CSS-Farbverläufe erstellen

linear-gradient. Der häufigste Typ. Ein Farbübergang entlang einer geraden Linie. Sie können die Richtung steuern (oben nach unten, links nach rechts, benutzerdefinierter Winkel) und beliebig viele Farbstopps hinzufügen.

radial-gradient. Farben strahlen von einem Mittelpunkt nach außen, als Kreis oder Ellipse. Perfekt für Lichteffekte, leuchtende Buttons oder subtile Hintergründe.

conic-gradient. Farben drehen sich um einen Mittelpunkt, wie Sektoren eines Farbrads. Ideal für Kreisdiagramme, Anzeigen oder Regenbogeneffekte.

repeating-linear-gradient / repeating-radial-gradient. Wiederholende Versionen, perfekt für Streifenmuster oder Texturen.

Analoge Farben. Wählen Sie benachbarte Farben auf dem Farbrad (Blau → Violett, Orange → Rot). Übergänge sind natürlich harmonisch und sanft.

Komplementärfarben. Gegenüberliegende Farben auf dem Rad (Blau → Orange). Vorsicht: direkte Übergänge können eine graue Zone in der Mitte erzeugen. Fügen Sie eine Zwischenfarbe hinzu.

Monochrom. Variationen eines Farbtons (Hellblau → Dunkelblau). Immer elegant und professionell. Perfekt für subtile Hintergründe.

Vermeiden Sie abrupte Übergänge. Je weiter die Farben auf dem Rad auseinander liegen, desto mehr Zwischenstopps brauchen Sie.

Profi-Tipp: Verwenden Sie den oklch()-Farbraum für wahrnehmungsgleichmäßige Übergänge. Farbverläufe in oklch sind natürlicher als in RGB.

Schritt 1: Typ wählen. Linear, radial oder konisch. Jeder Typ hat eigene Anpassungsoptionen.

Schritt 2: Farben auswählen. Verwenden Sie den Farbwähler für Ihre Stopps. Stopps per Klick hinzufügen, entfernen oder neu ordnen.

Schritt 3: Richtung und Positionen anpassen. Ändern Sie Winkel, Startpunkt und exakte Position jedes Stopps für volle Kontrolle.

Schritt 4: CSS-Code kopieren. Der CSS-Code wird in Echtzeit generiert. Kopieren und direkt in Ihr Stylesheet einfügen.

Live-Vorschau, Verlaufshistorie und beliebte Palettenvorschläge inklusive.

Abschnittshintergründe. Ein subtiler Farbverlauf zwischen zwei nahen Tönen verleiht Tiefe ohne vom Inhalt abzulenken. Die häufigste Verwendung im modernen Webdesign.

Buttons und CTAs. Ein Farbverlauf macht Buttons dynamischer und attraktiver als eine flache Farbe. Fügen Sie eine leichte Verlaufsänderung beim Hover hinzu.

Gradient-Text. Mit background-clip: text können Sie einen Farbverlauf direkt auf Text anwenden. Sehr beliebt für Überschriften und Logos.

Bild-Overlays. Ein halbtransparenter Farbverlauf über einem Bild verbessert die Lesbarkeit von darübergelegtem Text.

Rahmen. Border-image mit Farbverlauf erstellt farbige Rahmen, die mit klassischem border-color unmöglich sind.

CSS-Farbverläufe sind performant. Im Gegensatz zu Bildern sind sie vektoriell (keine Pixelierung), leichtgewichtig (wenige Bytes Code vs. KB Bild) und GPU-gerendert.

CSS statt Bilder bevorzugen. Ein CSS-Farbverlauf ist immer schneller zu laden und schärfer als ein Verlaufsbild. Er passt sich auch natürlich an alle Bildschirmgrößen an.

Anzahl der Stopps begrenzen. Mehr als 4-5 Stopps macht den Code komplex und die Vorschau schwierig. Für sehr komplexe Verläufe SVG in Betracht ziehen.

Auf Mobilgeräten testen. Farbverläufe können auf OLED- vs. LCD-Bildschirmen unterschiedlich aussehen. Immer auf mehreren Bildschirmtypen testen.

Barrierefreiheit. Stellen Sie sicher, dass Text auf einem Verlaufshintergrund an allen Punkten lesbar bleibt. Überprüfen Sie den WCAG-Kontrast an jedem Ende.