Zum Inhalt springen
Musterli

Kühl

Farbverlauf Rheinfall

Gischtweiss, Wassergrün und tiefes Blau in einem langen Verlauf.

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 18.9:1

  2. Farbe 2

    Text in Schwarz, Kontrast 9.4:1

  3. Farbe 3

    Text in Weiss, Kontrast 6.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: #dcf9f8;
background-image: linear-gradient(170deg, #dcf9f8 0%, #d8f7f6 5.56%, #ccf2f2 11.11%, #baebea 16.67%, #a3e1e2 22.22%, #89d7d9 27.78%, #6fced1 33.33%, #58c6cb 38.89%, #45c1c7 44.44%, #3ebfc6 50%, #3cbcc4 55.56%, #37b4be 61.11%, #30a9b4 66.67%, #279aa9 72.22%, #1f8b9c 77.78%, #167e90 83.33%, #0f7386 88.89%, #0b6b7f 94.44%, #09697d 100%);
background-image: linear-gradient(170deg in oklch, #dcf9f8 0%, #d8f7f6 5.56%, #ccf2f2 11.11%, #baebea 16.67%, #a3e1e2 22.22%, #89d7d9 27.78%, #6fced1 33.33%, #58c6cb 38.89%, #45c1c7 44.44%, #3ebfc6 50%, #3cbcc4 55.56%, #37b4be 61.11%, #30a9b4 66.67%, #279aa9 72.22%, #1f8b9c 77.78%, #167e90 83.33%, #0f7386 88.89%, #0b6b7f 94.44%, #09697d 100%);

Tailwind

bg-[#dcf9f8] bg-[linear-gradient(170deg,_#dcf9f8_0%,_#d8f7f6_5.56%,_#ccf2f2_11.11%,_#baebea_16.67%,_#a3e1e2_22.22%,_#89d7d9_27.78%,_#6fced1_33.33%,_#58c6cb_38.89%,_#45c1c7_44.44%,_#3ebfc6_50%,_#3cbcc4_55.56%,_#37b4be_61.11%,_#30a9b4_66.67%,_#279aa9_72.22%,_#1f8b9c_77.78%,_#167e90_83.33%,_#0f7386_88.89%,_#0b6b7f_94.44%,_#09697d_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

  • Föhnhimmel

    Klares Himmelblau, das in ein weiches Violett kippt.

  • Pfefferminz

    Helles Minzgrün bis kühles Türkis, leicht und sauber.

  • Gletscher

    Fast weisses Eisblau, das nach unten in kräftiges Blau übergeht.

  • Bergsee

    Klares Türkis und kühles Blau wie ein See an einem Sommermorgen.

  • Nordwind

    Ein zurückhaltendes Blaugrau, frisch und gut lesbar für Text darüber.

  • Zuckerwatte

    Zartes Rosa und Fliederblau, verspielt und weich.