Zum Inhalt springen
Musterli

Pastell

Farbverlauf Seifenblase

Ein konischer Verlauf in schimmernden Pastelltönen, der sich zum Kreis schliesst.

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

  2. Farbe 2

    Text in Schwarz, Kontrast 17.1:1

  3. Farbe 3

    Text in Schwarz, Kontrast 15.9: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: #f9d4f5;
background-image: conic-gradient(from 30deg at 50% 50%, #f9d4f5 0%, #fbd4f3 3.7%, #ffd4eb 7.41%, #ffd7e1 11.11%, #ffdad8 14.81%, #ffddcf 18.52%, #ffe0c4 22.22%, #fce3ba 25.93%, #f6e7bb 29.63%, #f4e8bb 33.33%, #f2e9bb 37.04%, #eaeabc 40.74%, #dfecc0 44.44%, #d0eec7 48.15%, #c2efd2 51.85%, #b8eedd 55.56%, #b2ede6 59.26%, #afecec 62.96%, #afebee 66.67%, #afebf1 70.37%, #b1eaf8 74.07%, #bae6ff 77.78%, #cae2ff 81.48%, #d7deff 85.19%, #e4daff 88.89%, #f0d6fd 92.59%, #f7d4f7 96.3%, #f9d4f5 100%);
background-image: conic-gradient(from 30deg at 50% 50% in oklch, #f9d4f5 0%, #fbd4f3 3.7%, #ffd4eb 7.41%, #ffd7e1 11.11%, #ffdad8 14.81%, #ffddcf 18.52%, #ffe0c4 22.22%, #fce3ba 25.93%, #f6e7bb 29.63%, #f4e8bb 33.33%, #f2e9bb 37.04%, #eaeabc 40.74%, #dfecc0 44.44%, #d0eec7 48.15%, #c2efd2 51.85%, #b8eedd 55.56%, #b2ede6 59.26%, #afecec 62.96%, #afebee 66.67%, #afebf1 70.37%, #b1eaf8 74.07%, #bae6ff 77.78%, #cae2ff 81.48%, #d7deff 85.19%, #e4daff 88.89%, #f0d6fd 92.59%, #f7d4f7 96.3%, #f9d4f5 100%);

Tailwind

bg-[#f9d4f5] bg-[conic-gradient(from_30deg_at_50%_50%,_#f9d4f5_0%,_#fbd4f3_3.7%,_#ffd4eb_7.41%,_#ffd7e1_11.11%,_#ffdad8_14.81%,_#ffddcf_18.52%,_#ffe0c4_22.22%,_#fce3ba_25.93%,_#f6e7bb_29.63%,_#f4e8bb_33.33%,_#f2e9bb_37.04%,_#eaeabc_40.74%,_#dfecc0_44.44%,_#d0eec7_48.15%,_#c2efd2_51.85%,_#b8eedd_55.56%,_#b2ede6_59.26%,_#afecec_62.96%,_#afebee_66.67%,_#afebf1_70.37%,_#b1eaf8_74.07%,_#bae6ff_77.78%,_#cae2ff_81.48%,_#d7deff_85.19%,_#e4daff_88.89%,_#f0d6fd_92.59%,_#f7d4f7_96.3%,_#f9d4f5_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

  • Zuckerwatte

    Zartes Rosa und Fliederblau, verspielt und weich.

  • Pfirsichblüte

    Ein heller Pfirsichton, der in ein warmes Rosé übergeht.

  • Lavendelfeld

    Von hellem Flieder zu kräftigerem Lavendel, ruhig und elegant.

  • Morgentau

    Ein Hauch Grün und ein Hauch Blau, kaum sichtbar und sehr frisch.

  • Macaron

    Rosa, Vanille und Pistazie nebeneinander wie in der Konditorei.

  • Eisvogel

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