Dégradé galaxie : codes cosmiques sur espace profond

Un dégradé galaxie est une couleur de nébuleuse douce qui jaillit d’un fond presque noir : des nuages violets, magenta, sarcelle ou braise qui s’effacent dans l’espace profond, en général avec un saupoudrage de minuscules étoiles par-dessus. Le secret, c’est la proportion. Les vraies photos de l’espace sont surtout sombres, et la couleur vit dans un ou deux nuages plutôt que sur tout le cadre. Voici des codes à copier pour les grandes familles de nébuleuses et un champ d’étoiles complet en couches CSS.

Ce qui fait ressembler un dégradé à une galaxie

Un fondu du violet au bleu n’est qu’un dégradé violet. Il commence à se lire comme de l’espace quand il réunit les quatre éléments que l’œil attend des images d’astronomie :

• Un fond presque noir, légèrement teinté de bleu ou de violet plutôt que neutre.
• Des nuages de nébuleuse qui rayonnent depuis un cœur brillant et s’effacent de façon irrégulière, un travail pour les dégradés radiaux.
• Un cœur plus brillant au sein du nuage le plus lumineux : un rose pâle, un lilas ou une crème presque blanche.
• Des étoiles : beaucoup de minuscules points blancs et bleu pâle, quelques-uns un peu plus gros, semés sans motif.

Codes de dégradé galaxie

Chacun est un seul dégradé radial à coller dans un outil de design ou une feuille de style. Ils sont volontairement pondérés vers le sombre. Le violet est le dégradé d’espace classique ; la sarcelle paraît plus froide et plus scientifique ; la braise évoque une étoile mourante ou une affiche de science-fiction.

Si vous voulez quelque chose de plus proche de chez nous, un ciel avec des étoiles et une lune plutôt que l’espace profond, les codes de dégradé de ciel nocturne sont plus doux. Pour des rideaux de lumière verte et violette, voir les dégradés d’aurore.

Construire un fond de galaxie en CSS, couche par couche

Un seul dégradé donne une nébuleuse. Une galaxie vient de l’empilement de plusieurs, ce que le CSS fait bien car background-image accepte une liste. La première couche listée est peinte au-dessus.

1. 1

   Posez le fond

   Un large dégradé radial de l’indigo du vide au centre à l’espace profond sur les bords, pour que le cadre ne paraisse jamais plat.

2. 2

   Ajoutez une nébuleuse principale

   Un dégradé radial coloré qui s’efface vers transparent, placé hors centre, à peu près là où se croiserait une ligne des tiers.

3. 3

   Ajoutez un second nuage, plus petit

   Une autre teinte, loin de la première, à plus faible opacité. Elle ajoute de la profondeur sans se disputer l’attention.

4. 4

   Semez les étoiles

   De minuscules points radiaux répétés à deux ou trois tailles différentes, pour que les répétitions ne s’alignent jamais en grille visible.

5. 5

   Finissez avec du grain

   Une faible couche de bruit sur le tout masque le banding dans les zones sombres et donne un air photographique.

.galaxy {
  min-height: 100vh;
  background-color: #03020a;
  background-image:
    /* stars, tiled at three scales */
    radial-gradient(circle at 20% 30%, #ffffff 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, #dbeafe 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 60%, #ffffff 0 1.5px, transparent 2px),
    /* nebulae */
    radial-gradient(ellipse at 30% 40%, rgb(192 38 211 / 0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 25%, rgb(45 212 191 / 0.3) 0%, transparent 40%),
    /* ground */
    radial-gradient(ellipse at 50% 45%, #1a1240 0%, #0a0820 50%, #03020a 100%);
  background-size:
    180px 180px,
    260px 260px,
    420px 420px,
    100% 100%,
    100% 100%,
    100% 100%;
}

La syntaxe radiale, y compris les tailles comme ellipse 60% 25% et les positions d’arrêt, est traitée dans le dégradé radial CSS. Pour la couche de grain, la texture de bruit CSS propose une approche par filtre SVG à copier.

Éviter qu’un dégradé galaxie vire au boueux

L’échec le plus courant est une galaxie qui ressemble à un bleu : des couleurs qui se recouvrent en brun ou en gris, et une couleur répartie si uniformément que rien ne rayonne. L’éclat a besoin d’obscurité autour de lui. Le remède est presque toujours moins de couleur, mieux placée. La théorie des couleurs derrière cela est dans les dégradés boueux.

Poser des mots sur un fond de galaxie

Les fonds de galaxie vont avec un texte blanc ou très pâle, et surtout sur la partie sombre du cadre, pas sur le cœur lumineux de la nébuleuse. Composez le titre dans l’espace vide et laissez le nuage d’un côté. Les étoiles derrière un petit texte sont un vrai problème : on les prend pour des points perdus. Gardez la zone derrière le corps de texte libre des plus grosses étoiles, ou omettez les étoiles dans cette région.

C’est le genre d’équilibre que Gradiently gère de lui-même. Un Mark sait où sont vos mots, place sa région la plus calme et la mieux contrastée derrière eux et apaise le détail chargé près des lettres : un fond cosmique n’avale ainsi jamais le titre. Les Marks peuvent aussi porter un mouvement lent, qui convient mieux à une galaxie que n’importe quelle image fixe.

Où les dégradés galaxie fonctionnent le mieux

Le jeu vidéo et le streaming sont l’usage naturel, et l’identité visuelle d’un streamer Twitch montre comment garder un seul look sur les panneaux, bannières et overlays. Pour d’autres fonds sombres qui rayonnent, lisez les fonds dégradés sombres.