# Farbverlauf-Hintergrund machen, der nicht nach Standard aussieht [Canonical HTML page](https://gradiently.design/de/guide/gradient-background) Die meisten Farbverlauf-Hintergründe sehen gleich aus, weil sie von denselben wenigen Vorlagen ausgehen. Hier ist eine Methode in fünf Schritten für einen, der durchdacht wirkt, mit Codes zum Kopieren. ## The short version - Ein guter Farbverlauf-Hintergrund beginnt mit einer Grundfarbe, einer kleinen Familie aus drei bis fünf verwandten Farben, einem Material oder einer Textur und einem geplanten Platz für Wörter. - Die meisten Farbverlauf-Hintergründe wirken beliebig, weil sie zweifarbige Vorlagen in denselben beliebten Farbtönen sind, in einer geraden Diagonale gemischt. - Ein dunkler oder heller Grund bestimmt die Stimmung stärker als jede einzelne Farbe, wähle ihn also zuerst. - Ein wenig Körnung verbirgt Banding und lässt einen digitalen Farbverlauf wie eine Oberfläche wirken statt wie eine Bildschirmvorgabe. - Rendere den Hintergrund für jedes Format, statt ein Bild zuzuschneiden, damit der hellste Bereich immer dort landet, wo das Design ihn braucht. 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](https://gradiently.design/de/guide/why-every-feed-looks-the-same). ### Beliebig - Zwei gesättigte Farben aus einer Vorlage - Eine gerade 45-Grad-Diagonale - Perfekt saubere digitale Oberfläche - Farbe gleichmäßig verteilt, kein Platz für Wörter - Ein Bild, auf jede Größe gestreckt ### Durchdacht - Ein Grund plus eine Familie aus drei bis fünf Farben - Licht, das von irgendwo kommt - Körnung, Papier oder Glanz auf der Oberfläche - Eine ruhige Zone für die Überschrift geplant - Für jedes Format frisch gerendert ## 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. - Dunkler Grund, violettes Licht: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #2e1065 35%, #0c0a1d 75%)` - Papiergrund, Pfirsichlicht: `radial-gradient(circle at 25% 25%, #fed7aa 0%, #fdf2e9 45%, #f7f1ea 80%)` - Tiefgrüner Grund, türkises Licht: `radial-gradient(circle at 70% 80%, #0d9488 0%, #134e4a 40%, #071a1a 80%)` Drei Gründe mit je einer Lichtfarbe. Der Grund leistet den Großteil der Arbeit, der Akzent muss nur leuchten. Wählst du Dunkel, lies vor dem Export [dunkle Farbverlauf-Hintergründe](https://gradiently.design/de/guide/dark-gradient-backgrounds), 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](https://gradiently.design/de/guide/muddy-gradients). - Tintengrund: #0f0b1e - Indigoschatten: #312e81 - Violetter Hauptton: #6d28d9 - Fliederaufhellung: #c084fc - Glutakzent: #fb923c Ein Grund, drei verbundene Violetttöne und ein warmer Akzent. Die Glut erscheint nur an einer kleinen Stelle, genau deshalb fällt sie auf. ## 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](https://gradiently.design/de/guide/gradient-texture) vergleicht die Familien, und [körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients) 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](https://gradiently.design/de/guide/color-contrast-accessibility). Ein Event-Post, bei dem die Überschrift auf dem hellsten Bereich des Farbverlaufs sitzt und schwer lesbar ist Gleichmäßig verteilte Farbe heißt, dass der hellste Teil direkt hinter den Wörtern landen kann. Derselbe Event-Post mit einem ruhigeren, dunkleren Bereich des Farbverlaufs hinter der Überschrift Mit einer ruhigen Zone hinter dem Text trägt derselbe Hintergrund die Botschaft. ## 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 Vier gängige Hintergrundgrößen. Das Licht sollte auf jeder an einer sinnvollen Stelle landen, nicht dort, wo ein Zuschnitt es liegen lässt. ## 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. ```css 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%); } ``` Ein dunkler Grund, ein violettes Licht von oben rechts und ein Indigoschatten unten links. Füge zum Abschluss eine Körnungsschicht obenauf hinzu. Für einen Hero-Bereich statt einer ganzen Seite funktionieren dieselben Ebenen auf dem Bereich selbst. [Website-Hero-Hintergründe](https://gradiently.design/de/guide/website-hero-background) 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. ## FAQ ### Wie lasse ich einen Farbverlauf-Hintergrund weniger beliebig aussehen? Beginne mit einer Grundfarbe, nutze drei bis fünf verwandte Farben statt zwei, füge Körnung oder ein anderes Material hinzu und plane einen ruhigen Bereich für Wörter. ### Welche Farben ergeben einen guten Farbverlauf-Hintergrund? Farben, die im Farbkreis nah beieinanderliegen, gehen sauber ineinander über. Füge einen kontrastierenden Akzent in einem kleinen Bereich hinzu, um Spannung zu schaffen. ### Warum wiederholt sich mein CSS-Farbverlauf-Hintergrund in Streifen über die Seite? Das Wurzelelement ist kürzer als das Fenster, deshalb kachelt der Farbverlauf. Setze `min-height: 100%` auf `html` und `min-height: 100vh` auf `body`. ### Sollte ein Farbverlauf-Hintergrund dunkel oder hell sein? Beides geht. Dunkle Gründe lassen Farbe leuchten und wirken hochwertig, helle Gründe wirken gedruckt und ruhig. Wähle einen und bleib konsequent. ### Wie verhindere ich Banding in einem Farbverlauf-Hintergrund? Füge eine leichte Körnungsschicht hinzu und vermeide starke JPEG-Kompression. Dunkle und feine Farbverläufe zeigen am meisten Banding.