Farbverlauf-Hintergrundbild für Desktop und Handy: Codes und Anleitung

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.

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.

So machst du ein Farbverlauf-Hintergrundbild

1. 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. 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 sind der einfachste Weg.

3. 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. 4

   Mische weich

   Verteile die Farbstopps und mische in OKLCH, wenn Farben auf dem Farbkreis weit auseinanderliegen, damit die Mitte nicht grau wird.

5. 5

   Füge Körnung hinzu

   Eine feine Rauschebene in geringer Stärke. Sie verbirgt Banding und lässt die Farbe satter wirken.

6. 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, was leuchtende Farben auch in der Mitte des Übergangs leuchtend hält.

<!doctype html>
<html>
<head>
<style>
  html, body { margin: 0; height: 100%; }
  body {
    background:
      radial-gradient(ellipse at 25% 20%, oklch(0.78 0.14 20 / 0.9), transparent 60%),
      linear-gradient(135deg in oklch, oklch(0.62 0.2 300), oklch(0.72 0.15 200));
  }
</style>
</head>
<body></body>
</html>

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

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

Die ausführlicheren Erklärungen stehen in Banding bei Farbverläufen und matschige Farbverläufe. 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.

GR·N10S·5T

Cameo Bolero

Diesen Mark ansehen

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 willst.