Aurora-Farbverläufe: weiches Licht, richtig gemacht

Ein Aurora-Farbverlauf ist ein Hintergrund aus weicher, leuchtender Farbe, die über einem dunklen Grund schwebt, wie das Nordlicht: Schleier aus Grün, Türkis und Violett, die zu leuchten scheinen, statt auf der Oberfläche zu liegen. Technisch ist es eine Reihe stark verwischter Farbflecken oder -bänder auf fast schwarzer Basis, oft in sehr langsamer Bewegung. Es ist einer der stimmungsvollsten Looks, die ein Farbverlauf haben kann, und einer der am leichtesten zu übertreibenden.

Was einen Aurora-Farbverlauf ausmacht

Drei Dinge unterscheiden eine Aurora von einem gewöhnlichen dunklen Farbverlauf. Erstens ist der Grund sehr dunkel, fast schwarz, sodass jede Farbe darauf als Licht wirkt. Zweitens kommt die Farbe in weichen, ungleichmäßigen Schleiern oder Flecken statt in einer glatten Rampe von einer Seite zur anderen. Drittens sind die Kanten extrem verwischt, sodass nichts eine Form hat, die du nachzeichnen könntest. Zusammen erzeugen sie den Eindruck von Licht in der Luft statt Farbe an einer Wand.

Aurora-Farbpaletten, die funktionieren

Das echte Polarlicht bekommt seine Farben von Gasen hoch in der Atmosphäre: Sauerstoff liefert das vertraute Grün und weiter oben ein tiefes Rot, Stickstoff ergänzt Blau und Violett. Bei dieser Familie zu bleiben ist der Grund, warum manche Aurora-Farbverläufe natürlich aussehen und andere wie ein Nachtclub. Starte mit einem Grün oder Türkis, füge ein Violett hinzu und nutze Rosé oder Rot als seltenen Akzent.

Du kannst dich natürlich von der Natur entfernen. Warme Auroras in Bernstein und Koralle oder monochrome in einem einzigen Blau funktionieren beide, solange der Grund dunkel bleibt und die Farben Nachbarn sind. Mehr dazu, Farben zu wählen, die zusammenpassen, steht in analoge Farben.

So wirkt eine Aurora nicht wie ein Bildschirmschoner

Dunkelheit ist die wichtigste Zutat. Eine Aurora braucht mehr dunkle als helle Fläche, denn das Leuchten wirkt nur davor. Dieselbe Dunkelheit ist auch die Stelle, an der Banding zuerst auffällt: Lange, feine Rampen von dunklem Türkis zu Schwarz zeigen auf den meisten Bildschirmen sichtbare Stufen. Feine Körnung behebt das, wie in Gradient Banding und dunkle Verlaufshintergründe erklärt.

So baust du einen Aurora-Farbverlauf in CSS

Die übliche Technik sind einige radiale Farbverläufe in Form breiter, flacher Ellipsen, die auf einer übergroßen Ebene hinter dem Inhalt zusammen verwischt werden. Ein Pseudo-Element zu verwischen kostet mehr als ein schlichter Farbverlauf, halte also die Zahl der Ebenen niedrig und die Animation langsam und stoppe die Bewegung für alle, die reduzierte Bewegung bevorzugen.

.aurora {
  position: relative;
  overflow: hidden;
  background: #030712;
}

.aurora::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 40% 22% at 30% 30%, #34d399cc, transparent 70%),
    radial-gradient(ellipse 35% 20% at 62% 26%, #22d3eeaa, transparent 70%),
    radial-gradient(ellipse 30% 18% at 52% 48%, #8b5cf699, transparent 70%);
  filter: blur(40px);
  animation: aurora-drift 30s ease-in-out infinite alternate;
}

.aurora > * {
  position: relative; /* keep content above the light */
}

@keyframes aurora-drift {
  to { transform: translate3d(4%, -3%, 0) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora::before { animation: none; }
}

Mehr dazu, Farbverläufe weich zu animieren, steht in animierte Farbverlaufshintergründe. Zum Respektieren von Bewegungseinstellungen siehe reduzierte Bewegung.

Schrift auf einer Aurora

Aurora-Hintergründe sind großzügig zu Schrift, weil der größte Teil des Bildes dunkel ist. Setze helle Schrift in die dunkelste Region und halte den hellsten Schleier weit weg von den Worten. Der Fehler ist, Leuchten und Überschrift gemeinsam zu zentrieren, sodass die Buchstaben genau dort liegen, wo der Kontrast am geringsten ist.

Wo Aurora-Farbverläufe passen

• Marken für Musik, Schlaf, Meditation und Wohlbefinden, bei denen ruhiges Licht zum Produkt passt
• Nachtveranstaltungen, Planetarien, Astronomie und Reisen in nördliche Gegenden
• Technik-Launches, die Atmosphäre ohne Neon wollen
• Wallpaper und Sperrbildschirme, siehe Farbverlauf-Wallpaper
• Loopende Videohintergründe, bei denen das langsame Driften der ganze Sinn ist

Weniger passt es dort, wo Leute viel lesen oder Zahlen vergleichen müssen. Dashboards, Preistabellen und lange Artikel wollen eine ruhige, gleichmäßige Fläche, und ein driftendes Leuchten dahinter wird zur Ablenkung. Es beißt sich auch mit hellen Tagmarken: Eine Bäckerei oder ein Spielzeugladen sieht seltsam aus, in Polarnacht gehüllt. Leih dir in solchen Fällen nur die Weichheit, als einzelnes blasses Leuchten auf hellem Grund.

Weil eine Aurora von langsamer Bewegung lebt, ist sie als Loop am besten, nicht als Standbild. In Gradiently lassen sich Designs mit einem von dir gesicherten Mark als nahtlose Loops von 5 bis 30 Sekunden exportieren, mit der Bewegung und dem Tempo, die du wählst.