Zum Inhalt springen
Musterli

Leuchtend

Farbverlauf Neonnacht

Pink, Violett und Cyan wie Leuchtreklame in einer Regennacht.

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

  2. Farbe 2

    Text in Weiss, Kontrast 6.8:1

  3. Farbe 3

    Text in Schwarz, Kontrast 8.8: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: #e73dcd;
background-image: linear-gradient(120deg, #e73dcd 0%, #e43cce 5.56%, #d93bd2 11.11%, #ca39d7 16.67%, #b636db 22.22%, #a134de 27.78%, #8d32df 33.33%, #7d30de 38.89%, #722edd 44.44%, #6e2edc 50%, #6b35df 55.56%, #6048e5 61.11%, #4b60eb 66.67%, #2679ec 72.22%, #0090df 77.78%, #00a1d6 83.33%, #00aed2 88.89%, #00b7d0 94.44%, #14b9cf 100%);
background-image: linear-gradient(120deg in oklch, #e73dcd 0%, #e43cce 5.56%, #d93bd2 11.11%, #ca39d7 16.67%, #b636db 22.22%, #a134de 27.78%, #8d32df 33.33%, #7d30de 38.89%, #722edd 44.44%, #6e2edc 50%, #6b35df 55.56%, #6048e5 61.11%, #4b60eb 66.67%, #2679ec 72.22%, #0090df 77.78%, #00a1d6 83.33%, #00aed2 88.89%, #00b7d0 94.44%, #14b9cf 100%);

Tailwind

bg-[#e73dcd] bg-[linear-gradient(120deg,_#e73dcd_0%,_#e43cce_5.56%,_#d93bd2_11.11%,_#ca39d7_16.67%,_#b636db_22.22%,_#a134de_27.78%,_#8d32df_33.33%,_#7d30de_38.89%,_#722edd_44.44%,_#6e2edc_50%,_#6b35df_55.56%,_#6048e5_61.11%,_#4b60eb_66.67%,_#2679ec_72.22%,_#0090df_77.78%,_#00a1d6_83.33%,_#00aed2_88.89%,_#00b7d0_94.44%,_#14b9cf_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

  • Papagei

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

  • Hibiskus

    Ein radialer Verlauf von Orange zu leuchtendem Pink.

  • Fasnacht

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

  • 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.

  • Sternwarte

    Ein tiefes Nachtblau, das von oben her heller wird.