Zum Inhalt springen
Musterli

Dezent

Farbverlauf Pergament

Ein radialer Verlauf in Elfenbein und hellem Ocker.

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

  2. Farbe 2

    Text in Schwarz, Kontrast 14.5: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: #f7f2df;
background-image: radial-gradient(ellipse at 50% 40%, #f7f2df 0%, #f6f1de 11.11%, #f5efdb 22.22%, #f2ebd7 33.33%, #efe6d1 44.44%, #ece1cb 55.56%, #e9dcc6 66.67%, #e6d8c2 77.78%, #e5d6bf 88.89%, #e4d5be 100%);
background-image: radial-gradient(ellipse at 50% 40% in oklch, #f7f2df 0%, #f6f1de 11.11%, #f5efdb 22.22%, #f2ebd7 33.33%, #efe6d1 44.44%, #ece1cb 55.56%, #e9dcc6 66.67%, #e6d8c2 77.78%, #e5d6bf 88.89%, #e4d5be 100%);

Tailwind

bg-[#f7f2df] bg-[radial-gradient(ellipse_at_50%_40%,_#f7f2df_0%,_#f6f1de_11.11%,_#f5efdb_22.22%,_#f2ebd7_33.33%,_#efe6d1_44.44%,_#ece1cb_55.56%,_#e9dcc6_66.67%,_#e6d8c2_77.78%,_#e5d6bf_88.89%,_#e4d5be_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

  • Morgengrau

    Ein Grau mit warmem Anfang und kühlem Ende, wie der Himmel vor Sonnenaufgang.

  • Schiefer

    Mittleres bis dunkles Blaugrau, sachlich und modern.

  • Nebelmeer

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

  • Leinen

    Warmes Naturweiss, ideal als ruhiger Seitenhintergrund.

  • Kieselstein

    Warmes Hellgrau, das in kühles Grau übergeht.

  • Alpenglühen

    Warmes Gelb, Orange und Rosenrot wie das letzte Licht auf den Gipfeln.