CSS-Farbverlauf-Generator

Gestalten Sie einen Farbverlauf für den Hintergrund Ihrer Website und kopieren Sie das CSS. Ziehen Sie die Farbstopps auf der Leiste, klicken Sie darauf, um Farben hinzuzufügen, und wählen Sie zwischen linearem, radialem und konischem Verlauf.

Farbverlauf

Linear Radial Konisch

Winkel:

Form

Mittelpunkt

Wiederholen (repeating-gradient)

Beispiele:

Farben

Jede Farbe akzeptiert HEX, rgba(), hsl(), oklch() oder einen CSS-Namen; mit transparent oder einem Alphawert unter 1 verschmilzt sie mit dem Hintergrund.

CSS-Code

Arten von Farbverläufen in CSS

linear-gradient() blendet die Farben entlang einer Linie im gewählten Winkel ineinander (0deg von unten nach oben, 90deg von links nach rechts). radial-gradient() verteilt sie in Kreisen oder Ellipsen um einen Mittelpunkt, und conic-gradient() lässt sie um einen Punkt kreisen – wie bei einem Farbrad oder Tortendiagramm.

Die Varianten repeating-linear-gradient(), repeating-radial-gradient() und repeating-conic-gradient() wiederholen das Muster: Mit nahe beieinanderliegenden Stopps (zum Beispiel bei 0 % und 10 %) entstehen Streifen und Karos ganz ohne Bilder.

So verwenden Sie den Code

Farbverläufe sind in CSS Bilder: Sie werden mit background oder background-image gesetzt, nie mit background-color. Alle aktuellen Browser unterstützen sie ohne -webkit--Präfix.

Für Text mit Farbverlauf kombinieren Sie den Hintergrund mit background-clip: text und color: transparent. Und wenn Sie Text darüberlegen, prüfen Sie den Kontrast zur hellsten Farbe des Verlaufs.