Dégradés aurore : une lumière douce, bien faite

Un dégradé aurore est un arrière-plan de couleur douce et lumineuse qui flotte sur un fond sombre, comme les aurores boréales : des voiles de vert, de turquoise et de violet qui semblent briller plutôt que reposer sur la surface. Techniquement, c’est un ensemble de nappes ou de bandes de couleur très floues sur une base presque noire, souvent en mouvement très lent. C’est l’un des aspects les plus atmosphériques qu’un dégradé puisse avoir, et l’un des plus faciles à surcharger.

Ce qui distingue un dégradé aurore

Trois choses séparent une aurore d’un simple dégradé sombre. D’abord, le fond est très sombre, proche du noir, si bien que toute couleur posée dessus se lit comme de la lumière. Ensuite, la couleur vient en voiles ou nappes doux et irréguliers plutôt qu’en rampe lisse d’un côté à l’autre. Enfin, les bords sont extrêmement flous, si bien que rien n’a de forme que l’on puisse suivre. Ensemble, cela donne l’impression d’une lumière dans l’air plutôt que de peinture sur un mur.

Des palettes d’aurore qui marchent

La vraie aurore tire ses couleurs des gaz de la haute atmosphère : l’oxygène donne le vert familier et, plus haut, un rouge profond, tandis que l’azote ajoute des bleus et des violets. Rester près de cette famille est ce qui rend certains dégradés aurore naturels et d’autres dignes d’une boîte de nuit. Partez d’un vert ou d’un turquoise, ajoutez un violet, et utilisez le rose ou le rouge comme accent rare.

Vous pouvez bien sûr vous écarter de la nature. Des aurores chaudes en ambre et corail, ou monochromes dans un seul bleu, marchent aussi, tant que le fond reste sombre et que les couleurs restent voisines. Pour en savoir plus sur le choix de couleurs qui vont ensemble, voyez les couleurs analogues.

Comment éviter qu’une aurore fasse économiseur d’écran

L’obscurité est l’ingrédient le plus important. Une aurore a besoin de plus de zone sombre que de zone éclairée, car la lueur ne se lit que contre elle. Cette même obscurité est aussi l’endroit où le banding apparaît en premier : de longues rampes subtiles du turquoise sombre au noir montrent des marches sur la plupart des écrans. Un grain fin y remédie, comme l’expliquent le banding des dégradés et les arrière-plans dégradés sombres.

Comment construire un dégradé aurore en CSS

La technique habituelle consiste en quelques dégradés radiaux en larges ellipses plates, flouées ensemble sur une couche surdimensionnée derrière le contenu. Flouter un pseudo-élément coûte plus cher qu’un simple dégradé : gardez donc peu de couches et une animation lente, et arrêtez le mouvement pour ceux qui préfèrent le mouvement réduit.

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

Pour en savoir plus sur l’animation fluide des dégradés, voyez les arrière-plans dégradés animés. Pour respecter les préférences de mouvement, voyez le mouvement réduit.

Le texte sur une aurore

Les arrière-plans aurore sont généreux avec le texte, car la majeure partie du cadre est sombre. Placez le texte clair dans la zone la plus sombre et gardez le voile le plus lumineux bien à l’écart des mots. L’erreur est de centrer ensemble la lueur et le titre, si bien que les lettres reposent sur la seule zone au contraste le plus faible.

Où placer les dégradés aurore

• Les marques de musique, de sommeil, de méditation et de bien-être, où une lumière calme convient au produit
• Les événements de nuit, planétariums, astronomie et voyages vers le Grand Nord
• Les lancements tech qui veulent de l’atmosphère sans néon
• Les fonds d’écran et écrans verrouillés ; voyez le fond d’écran dégradé
• Les arrière-plans vidéo en boucle, où la dérive lente est tout l’enjeu

Il convient moins quand il faut beaucoup lire ou comparer des chiffres. Les tableaux de bord, les grilles tarifaires et les longs articles veulent une surface calme et uniforme, et une lueur qui dérive derrière eux devient une distraction. Il se heurte aussi aux marques claires et diurnes : une boulangerie ou un magasin de jouets aura l’air étrange enveloppé de nuit polaire. Dans ces cas, n’empruntez que la douceur, sous forme d’une seule lueur pâle sur un fond clair.

Comme une aurore dépend d’un mouvement lent, elle est à son meilleur en boucle plutôt qu’en image fixe. Dans Gradiently, les designs faits avec un Mark que vous avez réservé s’exportent en boucles parfaites de 5 à 30 secondes, avec le mouvement et le rythme que vous choisissez.