# Dégradé galaxie : codes cosmiques sur espace profond

[Canonical HTML page](https://gradiently.design/fr/guide/galaxy-gradient)

Une galaxie n’est pas une couleur, c’est de la profondeur : un fond sombre, des nuages de lumière et des points blancs semés au travers. Voici les codes et les couches qui la rendent crédible.

## The short version

- Un dégradé galaxie se construit avec un fond presque noir, un ou deux nuages doux de couleur de nébuleuse et un semis de petites étoiles.
- Les dégradés radiaux conviennent mieux aux galaxies que les linéaires, car les nébuleuses rayonnent vers l’extérieur depuis un centre brillant.
- L’essentiel d’un fond de galaxie doit rester sombre, la couleur couvrant peut-être un tiers du cadre.
- Placer deux couleurs de nébuleuse loin l’une de l’autre évite le gris boueux qui apparaît là où des teintes opposées se recouvrent.
- Les dégradés très sombres forment facilement des bandes : un fond de galaxie demande une couche de grain léger avant l’export.

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.

- Espace profond: #03020a
- Indigo du vide: #1a1240
- Violet nébuleuse: #6d28d9
- Magenta cosmique: #c026d3
- Sarcelle profonde: #0e7490
- Sarcelle ionique: #2dd4bf
- Braise: #fb923c
- Cœur d’étoile: #fdf4e3

Une palette de galaxie. Choisissez le fond, une famille de nébuleuse et le cœur d’étoile. Employer toutes les couleurs à la fois, c’est ainsi que l’espace devient un arc-en-ciel.

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

- Nébuleuse violette: `radial-gradient(ellipse at 30% 40%, #c026d3 0%, #6d28d9 25%, #1e1b4b 55%, #05040f 85%)`
- Nébuleuse sarcelle: `radial-gradient(ellipse at 70% 35%, #2dd4bf 0%, #0e7490 25%, #172554 55%, #030712 85%)`
- Nébuleuse braise: `radial-gradient(ellipse at 60% 60%, #fb923c 0%, #be185d 25%, #3b0a2a 55%, #08030a 85%)`
- Poussière cosmique rose: `radial-gradient(circle at 20% 80%, #ec4899 0%, #7c3aed 30%, #1e1b4b 60%, #020617 90%)`
- Cœur de galaxie spirale: `radial-gradient(ellipse 60% 25% at 50% 50%, #fdf4e3 0%, #c4b5fd 15%, #4c1d95 40%, #0b0820 75%)`
- Bande de la Voie lactée: `linear-gradient(135deg, #04030c 0%, #1b1446 35%, #8b7fd6 50%, #1b1446 65%, #04030c 100%)`

Six dégradés de galaxie. Le cœur spiral utilise une ellipse aplatie, et la bande de la Voie lactée est une raie brillante dans un ciel sombre.

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](https://gradiently.design/fr/guide/night-sky-gradient) sont plus doux. Pour des rideaux de lumière verte et violette, voir [les dégradés d’aurore](https://gradiently.design/fr/guide/aurora-gradients).

## 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. **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. **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. **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. **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. **Finissez avec du grain** Une faible couche de bruit sur le tout masque le banding dans les zones sombres et donne un air photographique.

```css
.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%;
}
```

Une galaxie complète en une seule règle. Les tuiles d’étoiles faisant 180, 260 et 420 pixels, leur motif ne se répète que là où les trois s’alignent, c’est-à-dire rarement.

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](https://gradiently.design/fr/guide/css-radial-gradient). Pour la couche de grain, [la texture de bruit CSS](https://gradiently.design/fr/guide/css-noise-texture) 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](https://gradiently.design/fr/guide/muddy-gradients).

### Paraît boueux

- Violet, sarcelle et orange qui se recouvrent tous au milieu
- De la couleur sur tout le cadre
- Un fond gris neutre ou noir pur
- Des étoiles en grille nette et visible
- Une surface numérique lisse et propre avec du banding

### Paraît de l’espace profond

- Un nuage principal et un petit compagnon, éloignés
- De la couleur sur environ un tiers du cadre, le reste sombre
- Un fond teinté d’indigo ou de bleu
- Des étoiles répétées à des tailles inégales
- Un grain fin sur le tout

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

Un design large avec un fond d’espace profond, un nuage de couleur lumineux sur un côté et les mots « Soirée de lancement » en blanc

Une annonce de stream à la taille d’une miniature YouTube. Les mots se posent dans la moitié sombre ; la couleur vit de l’autre côté.

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

| Usage | Taille | Conseil |
| --- | --- | --- |
| Écran hors ligne Twitch | 1920×1080 | Nébuleuse d’un côté, programme du côté sombre |
| Visuel de chaîne YouTube | 2560×1440 | Gardez le cœur près de la zone de sécurité centrale |
| Bannière de serveur Discord | 960×540 | Un seul nuage ; elle s’affiche en petit |
| Fond d’écran de téléphone | 1080×1920 | Placez la nébuleuse en bas, loin de l’horloge |
| Pochette d’album ou de playlist | 1080×1080 | Un cœur spiral au milieu fait office de symbole |
| Affiche d’événement | A4 à 300 dpi, 2480×3508 | L’impression assombrit les tons profonds : éclaircissez un peu le fond |

Les dégradés galaxie sont chez eux dans le jeu vidéo, la musique, la tech et tout ce qui se passe la nuit.

Le jeu vidéo et le streaming sont l’usage naturel, et [l’identité visuelle d’un streamer Twitch](https://gradiently.design/fr/guide/twitch-streamer-branding) 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](https://gradiently.design/fr/guide/dark-gradient-backgrounds).

## FAQ

### Quelles couleurs composent un dégradé galaxie ?

Un fond presque noir comme #03020a, une couleur de nébuleuse comme le violet #6d28d9, le magenta #c026d3 ou la sarcelle #2dd4bf, et un cœur pâle proche du blanc. L’essentiel du cadre reste sombre.

### Comment faire un fond de galaxie en CSS ?

Empilez plusieurs dégradés radiaux dans `background-image` : un fond sombre, un ou deux nuages de nébuleuse qui s’effacent vers le transparent, et de minuscules points répétés à différentes valeurs de `background-size` pour les étoiles.

### Pourquoi mon dégradé d’espace paraît-il boueux ?

Des couleurs opposées se recouvrent et trop de cadre est coloré. Employez un nuage principal, gardez une seconde teinte loin de lui et laissez le fond sombre dominer.

### Quelle couleur de police sur un fond de galaxie ?

Du blanc ou un lilas ou bleu très pâle, placé sur la partie sombre du cadre plutôt que sur le cœur lumineux de la nébuleuse.