Zum Inhalt springen
Musterli

Dunkel

Farbverlauf Vulkan

Glühendes Orange am unteren Rand, das nach oben in verkohltes Dunkel übergeht.

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

  2. Farbe 2

    Text in Weiss, Kontrast 7.7:1

  3. Farbe 3

    Text in Weiss, Kontrast 18.1: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: #ed8725;
background-image: radial-gradient(ellipse at 50% 100%, #ed8725 0%, #eb8424 5.56%, #e47c23 11.11%, #da6f21 16.67%, #cd6020 22.22%, #be501f 27.78%, #b0411f 33.33%, #a4351e 38.89%, #9d2d1e 44.44%, #9a2a1e 50%, #96291e 55.56%, #8b281d 61.11%, #7a251b 66.67%, #652118 72.22%, #511d16 77.78%, #3e1913 83.33%, #2f1510 88.89%, #25120f 94.44%, #22110e 100%);
background-image: radial-gradient(ellipse at 50% 100% in oklch, #ed8725 0%, #eb8424 5.56%, #e47c23 11.11%, #da6f21 16.67%, #cd6020 22.22%, #be501f 27.78%, #b0411f 33.33%, #a4351e 38.89%, #9d2d1e 44.44%, #9a2a1e 50%, #96291e 55.56%, #8b281d 61.11%, #7a251b 66.67%, #652118 72.22%, #511d16 77.78%, #3e1913 83.33%, #2f1510 88.89%, #25120f 94.44%, #22110e 100%);

Tailwind

bg-[#ed8725] bg-[radial-gradient(ellipse_at_50%_100%,_#ed8725_0%,_#eb8424_5.56%,_#e47c23_11.11%,_#da6f21_16.67%,_#cd6020_22.22%,_#be501f_27.78%,_#b0411f_33.33%,_#a4351e_38.89%,_#9d2d1e_44.44%,_#9a2a1e_50%,_#96291e_55.56%,_#8b281d_61.11%,_#7a251b_66.67%,_#652118_72.22%,_#511d16_77.78%,_#3e1913_83.33%,_#2f1510_88.89%,_#25120f_94.44%,_#22110e_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

  • Espresso

    Warmes Kaffeebraun bis Schwarzbraun, dezent und dunkel.

  • Sternwarte

    Ein tiefes Nachtblau, das von oben her heller wird.

  • Tannenwald

    Dunkles Tannengrün bis fast Schwarz, ruhig und edel.

  • Tiefsee

    Von Petrolblau in die Dunkelheit, ideal hinter hellem Text.

  • Brombeere

    Sattes Beerenrot und dunkles Violett.

  • Nebelmeer

    Helles, fast neutrales Grau mit einem Hauch Blau, wie Nebel über dem Mittelland.