# Farbverlauf-Generator nutzen, ohne wie alle anderen auszusehen [Canonical HTML page](https://gradiently.design/de/guide/gradient-generator) Farbverlauf-Generatoren sind schnell und nützlich, und sie erzeugen alle ungefähr dieselben Looks. Die Lösung ist nicht ein besserer Generator, sondern das, was du in den fünf Minuten nach dem Klick tust. ## The short version - Ein Farbverlauf-Generator wählt Farben, eine Richtung und Stopps für dich aus und exportiert dann CSS oder ein Bild. - Die meisten Generator-Ergebnisse sehen gleich aus, weil sie dieselben Voreinstellungen teilen: zwei Stopps, ein diagonaler Winkel und sehr gesättigte Farben. - Von eigenen Farben statt von einer zufälligen oder angesagten Palette auszugehen, ist die größte Einzeländerung, die du machen kannst. - Ein dritter Stopp, eine andere Interpolation, eine zum Layout passende Richtung und Körnung machen aus einem generischen Ergebnis ein eigenes. - Teste einen generierten Farbverlauf immer mit echtem Text in echter Größe, bevor du ihn verwendest. Ein **Farbverlauf-Generator** ist ein Tool, das einen Verlauf für dich baut: Du wählst oder würfelst Farben, legst eine Richtung fest, und es exportiert CSS-Code oder ein Bild. Es ist der schnellste Weg zu einer gut aussehenden Mischung. Es ist auch der Grund, warum so viele Websites, Posts und Foliensätze dieselben Violett-zu-Pink- oder Blau-zu-Cyan-Hintergründe teilen. Der Generator ist nicht das Problem. Sein erstes Ergebnis zu übernehmen ist es. Dieser Leitfaden erklärt, warum Generator-Ergebnisse sich angleichen, und führt durch sechs Änderungen, die ein Ergebnis zu deinem machen. Für manche davon brauchst du die Grundlagen der [linearen Verläufe in CSS](https://gradiently.design/de/guide/css-linear-gradient). ## Was ein Farbverlauf-Generator eigentlich tut Die meisten Generatoren tun drei Dinge. Sie wählen zwei oder mehr Farben, entweder per Farbwähler, per Zufall oder aus einer Bibliothek beliebter Paletten. Sie legen Typ und Richtung fest, meist linear in einem Winkel. Und sie schreiben den Code, in der Regel einen einzelnen `linear-gradient()`-Wert, manchmal mit PNG- oder SVG-Export. Einige neuere Tools erzeugen Mesh- oder Blob-Verläufe, und manche nehmen eine Texteingabe an. Ein vertrautes Generator-Ergebnis: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)` Zwei gesättigte Stopps bei 135 Grad. Hübsch, und auf sehr vielen Seiten zu finden. ## Warum Generator-Ergebnisse alle gleich aussehen - **Standardmäßig zwei Stopps.** Zweifarb-Mischungen sind am einfachsten zu erzeugen und am leichtesten als generisch zu erkennen. - **Derselbe Winkel.** 135 Grad, von oben links nach unten rechts, ist ein häufiger Standard und passt zu fast nichts im Besonderen. - **Beliebte Paletten.** Bibliotheken zeigen die meistkopierten Kombinationen zuerst, sodass die meistgenutzten Verläufe noch öfter genutzt werden. - **Maximale Sättigung.** Zufallswähler und Voreinstellungen neigen zu leuchtenden Farben, die im Vorschaubild beeindrucken und hinter Text hart wirken. - **Kein Material.** Ein nackter Verlauf ist glatt, digital und flach. Fast jeder generierte Verlauf teilt dieses Finish. Nichts davon ist für sich falsch. Zusammen ergeben sie einen Look, der allen gehört, das Gegenteil dessen, was eine Marke braucht. [Farbverlauf-Branding](https://gradiently.design/de/guide/gradient-branding) erklärt, warum das über den Geschmack hinaus zählt. ## Sechs Änderungen, die einen generierten Verlauf zu deinem machen 1. **Starte mit deinen Farben** Füge deine Markenfarben ein oder Farben, die du aus einem Foto abgenommen hast, statt zufällige zu würfeln. [Eine Palette aus einem Bild ziehen](https://gradiently.design/de/guide/color-palette-from-image) ist eine gute Quelle. 2. **Füge einen dritten Stopp hinzu und verschiebe ihn** Eine verwandte Mittelfarbe bei 40 % oder 60 %, nicht bei 50 %, gibt der Mischung eine Form. Die Mischung neigt sich nun, und das wirkt wie Licht statt wie eine Füllung. 3. **Ändere die Interpolation** Mischen in OKLCH hält Farben in der Mitte leuchtend und vermeidet graue Stellen. Siehe [OKLCH-Farbverläufe](https://gradiently.design/de/guide/css-gradient-oklch). 4. **Passe die Richtung dem Layout an** Richte das Licht dorthin, wo der Inhalt ist. Ein vertikaler Abfall passt zu einer Story, ein tiefer Horizont zu einem Banner, ein radiales Leuchten zu einem Produktfoto. 5. **Füge Körnung oder ein Material hinzu** Eine feine Rauschschicht verdeckt Banding und gibt der Oberfläche Struktur. Es ist der schnellste Weg von digital zu greifbar. 6. **Schneide zu, statt nur zu füllen** Nutze einen Ausschnitt eines größeren Verlaufs oder skaliere ihn so hoch, dass nur ein weicher Übergang sichtbar bleibt. Zuschneiden verändert die Wirkung mehr als andere Farben. - 1. Das Generator-Ergebnis: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)` - 2. Eigene Farben, Stopp bei 60 %: `linear-gradient(135deg, #1e2a5a 0%, #4f46e5 60%, #c084fc 100%)` - 3. OKLCH, von oben abfallend: `linear-gradient(in oklch 170deg, #1e2a5a 0%, #4f46e5 60%, #f0abfc 100%)` - 4. Umgeformt zu tiefem Leuchten: `radial-gradient(circle at 70% 110%, #f0abfc 0%, #4f46e5 35%, #1e2a5a 70%, #0b1026 100%)` Ein generierter Verlauf, viermal bearbeitet. Jeder Schritt dauert weniger als eine Minute und bringt ihn weiter vom Standard weg. ## Vom Generator-Ergebnis zum Produktionscode Generatoren exportieren oft mehr, als du brauchst, oder weniger. Prüfe den Code, bevor du ihn einfügst: Moderne Browser brauchen für Verläufe keine Herstellerpräfixe mehr, und es lohnt sich, eine einfarbige Ersatzfarbe für den seltenen Fall zu ergänzen, dass der Verlauf nicht gerendert wird. ```css /* Edited generator output: solid fallback, own colours, OKLCH blend */ .hero { background-color: #1e2a5a; background-image: linear-gradient(in oklch 170deg, #1e2a5a 0%, #4f46e5 60%, #f0abfc 100%); } ``` Die Hintergrundfarbe erscheint, wenn der Verlauf nicht gerendert werden kann. Browser, die die Syntax `in oklch` nicht unterstützen, ignorieren die ganze Deklaration, deshalb ist die Ersatzfarbe wichtig. Wenn der Verlauf in E-Mails, als Social-Bild oder im Druck verwendet wird, exportiere ein Bild statt CSS. Erzeuge Bilder in der endgültigen Größe, füge vor dem Export Körnung hinzu und speichere als PNG, um Kompressionsstreifen zu vermeiden. ## Teste, bevor du veröffentlichst ### Im Generator getestet - Eine kleine quadratische Vorschau - Kein Text darauf - Ein Bildschirm, volle Helligkeit - Für sich allein beurteilt ### Im echten Einsatz getestet - Das tatsächliche Format, in voller Größe und in Smartphone-Größe - Echte Überschriften und Fließtext, Kontrast geprüft - Helle und dunkle Umgebung, mehrere Bildschirme - Neben deinen anderen Designs und denen deiner Mitbewerber Die meisten Verläufe scheitern am Kontrast, nicht an der Farbe. Setze deine echte Überschrift darauf und prüfe sie an der hellsten Stelle hinter dem Text. [Text auf einem Farbverlauf](https://gradiently.design/de/guide/text-on-gradient) zeigt, wie. ## Wenn ein Generator nicht reicht Ein Generator gibt dir Farbe. Er gibt dir keine Oberfläche mit Material, Licht und Bewegung, und er kann nicht versprechen, dass niemand sonst dasselbe Ergebnis nutzt. Wenn du einen Verlauf willst, der dir gehört, brauchst du etwas, das ihn mit allen anderen abgleicht. So funktioniert die Forge von Gradiently. Beschreibe einen Look in einem Satz oder baue ihn Regler für Regler: bis zu acht Farben, bis zu drei gestapelte Materialien, Licht, Körnung und Bewegung. Bevor ein neuer Mark veröffentlicht wird, wird er mit jedem anderen Mark abgeglichen, und alles, was zu nah dran ist, wird abgelehnt. Das Ergebnis rendert live hinter deinen Designs und kann genau einen Besitzer haben. Ein Mark ist ein generierter Verlauf, weitergedacht: ein vollständiges Rezept, ein öffentlicher Code und ein Besitzer. ## FAQ ### Was ist ein Farbverlauf-Generator? Ein Farbverlauf-Generator ist ein Tool, das aus gewählten oder zufälligen Farben und einer Richtung einen Verlauf baut und ihn als CSS-Code oder Bild exportiert. ### Warum wirken generierte Farbverläufe generisch? Die meisten teilen dieselben Voreinstellungen: zwei sehr gesättigte Stopps, ein diagonaler Winkel, keine Textur und Farben aus beliebten Paletten. Wenn du eines davon änderst, wird das Ergebnis eigenständiger. ### Brauche ich Herstellerpräfixe für CSS-Farbverläufe? Nicht für aktuelle Browser. Ein einfacher linear-gradient()-Wert funktioniert, und eine einfarbige background-color davor dient als Ersatz. ### Sollte ich CSS oder ein Bild aus einem Farbverlauf-Generator nutzen? Nutze CSS für Websites, wo es leicht und in jeder Größe scharf ist. Nutze ein exportiertes Bild für E-Mail, Social Posts und Druck. ### Wie mache ich einen Farbverlauf, den sonst niemand hat? Starte mit deinen eigenen Farben, füge ein Material oder Körnung hinzu und nutze ihn konsequent. In Gradiently wird jeder neue Mark vor der Veröffentlichung mit allen anderen abgeglichen und hat jeweils einen Besitzer.