Zum Inhalt springen
Musterli

Leuchtend

Farbverlauf Fasnacht

Gelb, Rot und Violett, bunt wie ein Umzug mit Guggenmusik.

Im Editor anpassen

Winkel, Form und Farben ändern, dann als CSS, SVG oder PNG exportieren.

Farben

Die Farbstopps des Verlaufs. Ein Klick auf einen Wert kopiert ihn.

  1. Farbe 1

    Text in Schwarz, Kontrast 14.2:1

  2. Farbe 2

    Text in Schwarz, Kontrast 5.3:1

  3. Farbe 3

    Text in Weiss, Kontrast 7.3:1

Code

Füge die Zeilen in die Regel deines Elements ein. Die erste Zeile ist eine Ersatzfarbe, die zweite der Verlauf für alle Browser, die dritte interpoliert in OKLCH für moderne Browser.

CSS

background-color: #f7d22a;
background-image: linear-gradient(90deg, #f7d22a 0%, #f9ce1d 5.56%, #fbc200 11.11%, #fcb000 16.67%, #fc9a00 22.22%, #fc8100 27.78%, #fe6200 33.33%, #fc4621 38.89%, #f73534 44.44%, #f52f39 50%, #f32c41 55.56%, #ed2356 61.11%, #e01a6f 66.67%, #cd1989 72.22%, #b61da1 77.78%, #9d22b2 83.33%, #8826bd 88.89%, #7928c2 94.44%, #7429c3 100%);
background-image: linear-gradient(90deg in oklch, #f7d22a 0%, #f9ce1d 5.56%, #fbc200 11.11%, #fcb000 16.67%, #fc9a00 22.22%, #fc8100 27.78%, #fe6200 33.33%, #fc4621 38.89%, #f73534 44.44%, #f52f39 50%, #f32c41 55.56%, #ed2356 61.11%, #e01a6f 66.67%, #cd1989 72.22%, #b61da1 77.78%, #9d22b2 83.33%, #8826bd 88.89%, #7928c2 94.44%, #7429c3 100%);

Tailwind

bg-[#f7d22a] bg-[linear-gradient(90deg,_#f7d22a_0%,_#f9ce1d_5.56%,_#fbc200_11.11%,_#fcb000_16.67%,_#fc9a00_22.22%,_#fc8100_27.78%,_#fe6200_33.33%,_#fc4621_38.89%,_#f73534_44.44%,_#f52f39_50%,_#f32c41_55.56%,_#ed2356_61.11%,_#e01a6f_66.67%,_#cd1989_72.22%,_#b61da1_77.78%,_#9d22b2_83.33%,_#8826bd_88.89%,_#7928c2_94.44%,_#7429c3_100%)]

Den Verlauf weiterdenken

Dieselben Farben in anderen Generatoren. Jede Karte öffnet den Editor mit diesen Farben.

Mit den Farben weiterarbeiten

Mach aus den Farbstopps eine Palette oder eine ganze Farbskala.

So verwendest du den Verlauf

Kopiere das CSS in die Regel des Elements, das den Verlauf tragen soll, etwa einen Abschnitt, eine Karte oder einen Button. Für Text auf dem Verlauf wähle eine Schriftfarbe, die auf allen Farbstopps genügend Kontrast hat; die Werte bei den Farben helfen dir dabei. Im Editor änderst du Winkel, Form und Übergang und exportierst den Verlauf auch als Bild.

Ähnliche Verläufe

Alle Farbverläufe

  • Nordlicht

    Grün, Türkis und Violett, wie Polarlicht über einem dunklen Himmel.

  • Eisvogel

    Leuchtendes Blau mit einem orangen Akzent, wie das Gefieder des Vogels.

  • Neonnacht

    Pink, Violett und Cyan wie Leuchtreklame in einer Regennacht.

  • Papagei

    Limettengrün, Türkis und Blau, laut und fröhlich.

  • Hibiskus

    Ein radialer Verlauf von Orange zu leuchtendem Pink.

  • Sternwarte

    Ein tiefes Nachtblau, das von oben her heller wird.