# Farbverlauf-Hintergrundbild für Desktop und Handy: Codes und Anleitung [Canonical HTML page](https://gradiently.design/de/guide/gradient-wallpaper) Ein Farbverlauf ist das ideale Hintergrundbild: keine Details, die mit deinen Icons kämpfen, nichts, woran man sich sattsieht, und Farbe, die das Gefühl eines ganzen Bildschirms verändert. So machst du eines, das auch in voller Größe glatt bleibt. ## The short version - Ein Farbverlauf-Hintergrundbild ist ein weicher Übergang aus Farben als Desktop- oder Handyhintergrund, gewählt, weil es hinter Icons, Widgets und Fenstern ruhig bleibt. - Erstelle Desktop-Hintergründe in der exakten Auflösung deines Bildschirms und in seinem eigenen Format, meist 16:9, und Handy-Hintergründe hoch, mit zusätzlicher Höhe über 9:16 hinaus. - Große, glatte Farbverläufe zeigen Banding am stärksten, also füge feine Körnung hinzu und exportiere als PNG statt als komprimiertes JPEG. - Setze den hellsten oder unruhigsten Teil des Farbverlaufs weg von der Stelle, an der Icons, Uhr und Widgets sitzen. - Das Mischen der Farben in OKLCH hält Regenbogen- und Komplementärverläufe leuchtend, statt sie in der Mitte grau werden zu lassen. Ein **Farbverlauf-Hintergrundbild** ist ein weicher Übergang aus Farben als Hintergrund für Desktop oder Handy. Es funktioniert, weil es keine Details hat, die mit Icons, Widgets und Fenstern konkurrieren, und weil es die Stimmung eines ganzen Bildschirms allein mit Farbe verändert. So machst du ein gutes: Wähle eine Familie aus drei bis fünf Farben, mische sie sanft mit dem Licht dort, wo das Auge ruhen soll, exportiere in der exakten Größe und dem Format deines Bildschirms und füge feine Körnung hinzu, damit der Übergang glatt bleibt, statt Streifen zu zeigen. Unten findest du fertige Farbverläufe zum Kopieren, die Methode, um eigene zu machen, und wie du jeden an einen Bildschirm anpasst. Weitere Farbkombinationen findest du unter [Farbverlauf-Kombinationen](https://gradiently.design/de/guide/gradient-color-combinations). ## Ideen für Farbverlauf-Hintergrundbilder mit Codes Jeder davon ist ein einzelner CSS-Farbverlauf, du kannst ihn also im Browser ansehen, die Farben anpassen und in jeder Größe exportieren. Sie sind grob von hell nach dunkel sortiert. - Korallenblüte: `linear-gradient(135deg, #ff9a8b 0%, #ff6a88 45%, #ff99ac 100%)` - Morgenhimmel: `linear-gradient(160deg, #a1c4fd 0%, #c2e9fb 100%)` - Zuckerdunst: `linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)` - Aprikosensonne: `linear-gradient(120deg, #f6d365 0%, #fda085 100%)` - Pastellspektrum: `linear-gradient(120deg, #ffb3b3 0%, #ffe0a3 25%, #b8f2e6 50%, #b9c6ff 75%, #e3b8ff 100%)` - Prismenwirbel: `conic-gradient(from 210deg at 70% 30%, #ff7eb3, #ffb86b, #fff27a, #7affc4, #6bc7ff, #b58cff, #ff7eb3)` - Tiefe Lagune: `linear-gradient(160deg, #134e5e 0%, #2f8f83 50%, #71b280 100%)` - Violette Nacht: `radial-gradient(ellipse at 30% 20%, #5b3cc4 0%, #2a1b6b 45%, #0e0a24 100%)` - Glutdämmerung: `radial-gradient(ellipse at 70% 80%, #ff6a3d 0%, #8a1f5c 45%, #1a0b24 100%)` - Mitternachtsstahl: `linear-gradient(180deg, #0f2027 0%, #203a43 50%, #2c5364 100%)` Zehn Farbverlauf-Hintergrundbilder von hell nach dunkel. Die beiden Spektrumverläufe halten ihre Farben auf ähnlicher Helligkeit, deshalb wirken sie wie ein weiches Licht statt wie Streifen. ## So machst du ein Farbverlauf-Hintergrundbild 1. **Finde die Größe deines Bildschirms** Sieh in den Anzeigeeinstellungen nach der Auflösung und in den technischen Daten deines Handys nach seiner Bildschirmgröße. Gestalte in genau dieser Größe oder größer im selben Format. 2. **Wähle eine Farbfamilie** Drei bis fünf Farben mit einer klaren Beziehung: benachbarte Farbtöne für Ruhe, ein warm-kaltes Paar für Energie. [Analoge Farben](https://gradiently.design/de/guide/analogous-colors) sind der einfachste Weg. 3. **Setze das Licht** Entscheide, wohin der hellste Bereich kommt. Auf dem Desktop weg von den Icons, auf dem Handy meist hinter die Uhr oder unten in die Mitte. 4. **Mische weich** Verteile die Farbstopps und mische in OKLCH, wenn Farben auf dem Farbkreis weit auseinanderliegen, damit die Mitte nicht grau wird. 5. **Füge Körnung hinzu** Eine feine Rauschebene in geringer Stärke. Sie verbirgt Banding und lässt die Farbe satter wirken. 6. **Exportiere als PNG** Verlustfreier Export hält den Übergang glatt. Ein stark komprimiertes JPEG ist die häufigste Ursache für Streifen. Wenn du eines im Browser bauen willst, lege einen Farbverlauf auf eine Vollbildseite und mische ihn in OKLCH. Moderne Browser unterstützen [Farbinterpolation in Verläufen](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient), was leuchtende Farben auch in der Mitte des Übergangs leuchtend hält. ```html ``` Eine Vollbild-Vorschau eines Farbverlaufs, in OKLCH gemischt, mit einem weichen radialen Leuchten darüber. Öffne sie im Browser, passe die Zahlen an und bau sie dann in der Größe deines Bildschirms nach oder nimm sie auf. ## Formate für Desktop- und Handy-Hintergründe Ein Hintergrundbild sieht am besten aus, wenn es für das Format seines Bildschirms gemacht ist, nicht aus einem anderen zugeschnitten. Die meisten Desktop-Monitore sind 16:9 oder nah dran, Laptops oft etwas höher, um 16:10. Handys sind viel höher als 16:9, viele liegen um 9:19,5. Gestalte jedes Format einzeln und lass das Licht jeweils an der richtigen Stelle fallen. - Desktop 16:9: 1920 × 1080 - Laptop 16:10: 1600 × 1000 - Hohes Handy, etwa 9:19,5: 900 × 1950 Die drei Formate, die du einplanen solltest. Die genauen Pixel variieren je nach Modell, prüf deins also vor dem Export. Mit zwei oder mehr Monitoren kannst du entweder ein Bild pro Bildschirm setzen oder ein breites Bild in der gemeinsamen Breite beider machen. Die zweite Variante lässt einen einzigen Farbverlauf über den ganzen Schreibtisch fließen, aber die Kante zwischen den Bildschirmen schneidet hindurch, also halte das Licht von dieser Kante fern. Handys bringen zwei Komplikationen mit: Uhr und Widgets auf dem Sperrbildschirm liegen über dem oberen Drittel, und manche Handys verschieben das Hintergrundbild leicht beim Neigen, was die Ränder beschneidet. [Handy-Hintergrundbild-Größe](https://gradiently.design/de/guide/phone-wallpaper-size) behandelt beides im Detail. ## So bleiben Farbverlauf-Hintergrundbilder glatt Hintergrundbilder werden groß gezeigt, oft auf hellen, hochwertigen Bildschirmen, und sind damit der härteste Test für einen Farbverlauf. Die zwei Probleme, die du sehen wirst, sind Banding, bei dem ein weicher Übergang in sichtbare Stufen zerfällt, und matschige Mitten, bei denen zwei kräftige Farben sich in Grau treffen. ### Erzeugt Streifen und Matsch - Nahe, dunkle Farben über eine große Fläche - Starke JPEG-Kompression - Komplementärfarben in sRGB gemischt - Ein perfekt glatter Übergang ohne Rauschen ### Hält es glatt - Genug Farbumfang über den Übergang - PNG oder Export in hoher Qualität - Mischen in OKLCH oder eine Mittelfarbe - Feine Körnung über das ganze Bild Die ausführlicheren Erklärungen stehen in [Banding bei Farbverläufen](https://gradiently.design/de/guide/gradient-banding) und [matschige Farbverläufe](https://gradiently.design/de/guide/muddy-gradients). Für Hintergrundbilder ist Körnung die einfachste Lösung: Sie bricht die Stufen auf, sodass das Auge einen durchgehenden Übergang sieht, und lässt flache Digitalfarbe wie Film wirken. ## Dunkle oder helle Farbverlauf-Hintergrundbilder Dunkle Hintergrundbilder sind nachts angenehmer für die Augen und lassen bunte Icons hervortreten, zeigen aber auch leichter Banding, Körnung ist hier also wichtiger. Helle Hintergrundbilder wirken luftig, können aber weißen Text auf Widgets schwer lesbar machen. Wenn dein Handy zwischen hellem und dunklem Erscheinungsbild wechselt, denk an ein Paar: dieselben Farbtöne, eine Version aufgehellt, eine vertieft. Ein Mark für sich allein: ein lebendiger Farbverlauf mit Farbe, Material, Licht und Körnung, der in jeder Bildschirmgröße gerendert werden kann. In Gradiently kannst du mit jedem Mark in eigenen Größen bis 8.000 Pixel an der langen Seite gestalten, so wird ein Look zum Hintergrundbild für Desktop, Laptop und Handy. Marks lassen sich auch als 5 bis 30 Sekunden lange Loop-Videos exportieren, wenn du ein [Live-Hintergrundbild](https://gradiently.design/de/guide/live-wallpaper) willst. ## FAQ ### Welche Größe sollte ein Farbverlauf-Hintergrundbild haben? Die exakte Auflösung deines Bildschirms oder größer im selben Format. Desktops sind meist 16:9 oder 16:10, Handys höher, oft um 9:19,5, prüf also dein Modell. ### Warum hat mein Farbverlauf-Hintergrundbild Streifen? Das ist Banding: Der Bildschirm zeigt einen weichen Übergang in sichtbaren Stufen. Exportiere als PNG, vermeide starke Kompression und füge feine Körnung hinzu, um es zu verbergen. ### Wie mache ich ein Regenbogen-Hintergrundbild, das nicht billig aussieht? Nutze einen Teil des Spektrums statt des ganzen, halte die Farben auf ähnlicher Helligkeit und mische in OKLCH, damit die Farben zwischen den Stopps leuchtend bleiben. ### Sind dunkle Hintergrundbilder besser fürs Handy? Sie sind bei wenig Licht angenehmer anzusehen und lassen Icons hervortreten. Auf Handys mit OLED-Bildschirm können dunkle Hintergrundbilder auch etwas weniger Strom verbrauchen, aber wähl das, das du gern ansiehst.