Kostenloser CSS-Verlauf-Generator online

Der CSS-Verlauf ist die leichteste und flexibelste Möglichkeit, einen Hintergrund, eine Schaltfläche oder eine Karte zu gestalten. Kein PNG-Export mehr aus einem Bildeditor: Der Browser berechnet den Übergang zwischen Ihren Farben vektorbasiert, in nur ein paar Dutzend Bytes. Der CSS-Verlauf-Generator von Volade produziert den exakten Code — Winkel, Stopps, Ursprungsposition — während Sie ihn auf dem Bildschirm zusammensetzen.

linear-gradient: der richtungsgebundene Verlauf

Die Funktion linear-gradient() nimmt einen Winkel gefolgt von den Stopps entgegen: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). Der Winkel 0deg zeigt nach oben, 90deg nach rechts, 180deg nach unten. Ohne Winkel geht der Browser von oben nach unten. Das ist die am häufigsten verwendete Syntax für Header, Call-to-Action-Buttons und Sektionsbänder.

radial-gradient: der Schein und die Ellipse

Die Funktion radial-gradient() beginnt an einem Punkt (standardmäßig der Mitte) und breitet sich als Kreis oder Ellipse aus. Die Ursprungsposition wird als at X% Y% geschrieben: radial-gradient(circle at 50% 50%, …). Perfekt für einen Schein hinter einer Überschrift, einen zentrierten Hero-Hintergrund oder einen synthetischen weichen Schatten. Das Tool bietet zwei Schieberegler X und Y, um den Ursprung pixelgenau zu platzieren.

conic-gradient: die Drehung um einen Punkt

Die Funktion conic-gradient() dreht sich um einen Punkt, wie die Zeiger einer Uhr. Sie wird als conic-gradient(from 90deg at 50% 50%, …) geschrieben und ermöglicht Ringe, kreisförmige Anzeigen, farbige Rahmen oder Prismen-Effekte. Jeder Stopps belegt einen Sektor: Mit mehreren Farben zeichnen Sie ein CSS-Kreisdiagramm ohne ein einziges Bild.

Die Farbstopps (color stops)

Jeder Stopps ordnet einer Farbe eine prozentuale Position zu: #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%. Identische Positionen bei zwei Farben erzeugen einen harten Übergang (harte Kante); weit auseinanderliegende Positionen erzeugen einen allmählichen Verlauf. Mehr als zwei Stopps ermöglichen mehrfarbige Paletten, Bänder oder Materialeffekte (Metall, Perlmutt, Polarlicht).

Einen Verlauf überlagern und einen Fallback vorsehen

In der Kurzschreibweise background, gilt die Reihenfolge: zuerst der Vordergrund. Ein dunkler Schleier über einem Foto schreibt sich als background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Legen Sie immer eine einheitliche Farbe als Fallback (background-color) für sehr alte Browser oder während das Bild lädt.

Best Practices für die Performance

Ein CSS-Verlauf wird bei jeder Größenänderung neu berechnet: Bleiben Sie bei der Anzahl der Stopps vernünftig (2 bis 5 reichen in 90 % der Fälle) und vermeiden Sie mehrfache Überlagerungen auf sehr großen Flächen im Mobilbereich. Verwenden Sie stabile Hex- oder HSL-Werte und fixieren Sie den Winkel, sobald das Design freigegeben ist, um Mikro-Unterschiede zwischen Browsern zu vermeiden.

Verläufe im Volade-Design

Um vor der Ausarbeitung der Verläufe eine kohärente Palette zu erstellen, kombinieren Sie den Palettengenerator und den Farbwähler : finden Sie Ihre Markenfarben und fügen Sie sie hier als Stopps ein. Das Ergebnis kopiert sich direkt in Ihr CSS, Ihr Designsystem oder Ihr Theme — am Computer wie auf dem Handy, ohne Konto und ohne Datenübertragung.