Farbverlauf-Hintergrund machen, der nicht nach Standard aussieht

Um einen Farbverlauf-Hintergrund zu machen, der nicht beliebig aussieht, wähle zuerst eine Grundfarbe, füge drei bis fünf verwandte Farben statt zwei hinzu, gib der Oberfläche ein Material wie Körnung oder weiches Licht und halte einen ruhigen Bereich frei, wo Wörter sitzen werden. Die meisten Farbverlauf-Hintergründe überspringen jeden dieser Schritte: Sie nehmen eine zweifarbige Vorlage, lassen sie von Ecke zu Ecke laufen und hören auf. Deshalb wirken so viele austauschbar.

Warum die meisten Farbverlauf-Hintergründe gleich aussehen

Design-Tools, Generatoren und Vorlagen bieten alle dieselbe kurze Liste von Übergängen, und Trends schieben alle im selben Moment zu denselben Farbtönen. Violett zu Pink, Blau zu Cyan und Orange zu Magenta sind angenehm, werden aber so breit genutzt, dass sie wie eine Vorgabe wirken statt wie eine Wahl. Das größere Muster erklärt warum jeder Feed gleich aussieht.

Schritt 1: einen Grund wählen

Der Grund ist die Farbe, auf der der Farbverlauf sitzt und zu der er zurückkehrt. Er bestimmt die Stimmung stärker als jeder Akzent. Ein Fast-Schwarz als Grund lässt Farbe leuchten und wirkt hochwertig und nächtlich, ein warmer gebrochener Weißton wirkt gedruckt, ruhig und redaktionell. Wähle einen, bevor du einen einzigen Akzent wählst, und behalte ihn für das ganze Set an Designs.

Wählst du Dunkel, lies vor dem Export dunkle Farbverlauf-Hintergründe, denn bei dunklen Übergängen zeigt sich Banding am stärksten.

Schritt 2: drei bis fünf verwandte Farben wählen

Zwei Farben sind der einfachste Farbverlauf zu machen und der einfachste zu kopieren. Eine kleine Familie gibt Tiefe: einen Schattenton, einen Hauptton, eine Aufhellung und einen sparsam genutzten Akzent. Halte Nachbarn im Farbkreis nah beieinander, damit die Übergänge sauber bleiben, und lass den Akzent abseits sitzen. Gegenüberliegende Farben nebeneinander werden dort grau, wo sie sich treffen, das behandelt trübe Farbverläufe.

Schritt 3: ein Material geben

Ein sauberer digitaler Übergang wirkt wie eine Bildschirmvorgabe. Ein Material lässt ihn wie eine Oberfläche wirken. Körnung liest sich als Film oder Druck, Papierstruktur als Handwerk, glasiger Glanz als Technik und weiche Seide als Luxus. Du brauchst nicht viel: Eine Rauschschicht bei niedriger Deckkraft genügt, um das Gefühl zu ändern. Farbverlauf-Textur vergleicht die Familien, und körnige Farbverläufe hat den Code.

Schritt 4: planen, wohin die Wörter kommen

Ein Hintergrund existiert, um etwas zu tragen: eine Überschrift, einen Preis, ein Datum. Entscheide, wo diese Wörter sitzen, bevor du den Farbverlauf fertigstellst, und halte diesen Bereich ruhiger und kontrastreicher. Setze die hellste, unruhigste Farbe weg vom Text, meist in eine Ecke, und lass den Grund hinter den Wörtern zu sehen sein. Zu den Kontrastregeln siehe Farbkontrast und Barrierefreiheit.

Schritt 5: für jedes Format rendern

Ein Farbverlauf, der als quadratischer Post richtig aussieht, kann als vertikale Story falsch aussehen, weil der Zuschnitt den hellen Bereich verschiebt. Sieh den Hintergrund als Rezept, das du in jeder Größe renderst und dabei anpasst, wo das Licht landet, nicht als einzelnes Bild, das du zuschneidest.

Post 1080×1350

1080 × 1350

Story 1080×1920

1080 × 1920

Website-Hero 1920×1080

1920 × 1080

Blog-Banner 1200×600

1200 × 600

Ein Farbverlauf-Hintergrund in CSS

Im Web hat ein ganzseitiger Farbverlauf einen klassischen Fehler: Ist die Seite kurz, wiederholt sich der Hintergrund in Bändern. Gib dem Wurzelelement eine Mindesthöhe, setze eine einfarbige Fallback-Farbe, die auch beim Überscrollen sichtbar ist, und lege dann den Farbverlauf darüber.

html {
  min-height: 100%;
  background-color: #0f0b1e; /* fallback, and the colour seen on overscroll */
}

body {
  min-height: 100vh;
  margin: 0;
  background-image:
    radial-gradient(circle at 80% 15%, #6d28d9 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #312e81 0%, transparent 50%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

Für einen Hero-Bereich statt einer ganzen Seite funktionieren dieselben Ebenen auf dem Bereich selbst. Website-Hero-Hintergründe behandelt Größe und Leistung.

Deinen Farbverlauf-Hintergrund besitzen

Selbst ein sorgfältig gemachter Hintergrund kann abgegriffen und wiederverwendet werden. In Gradiently ist ein fertiger Hintergrund ein Mark: ein Rezept aus Farben, Materialien, Licht, Körnung und Bewegung mit jeweils genau einem Inhaber. Er wird in jeder Größe gerendert, in der du gestaltest, und schafft von selbst Platz für deine Wörter. Du kannst mit jedem Mark kostenlos gestalten und einen sichern, um ihn zu deinem zu machen.