# Orbes en dégradé : des sphères lumineuses pour en-têtes et couvertures

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

Une seule sphère lumineuse sur un fond sombre peut porter toute une page d’accueil ou une pochette d’album. Elle paraît facile, et elle est facile à rater. Voici les recettes et les règles de placement.

## The short version

- Un orbe en dégradé est une sphère lumineuse créée à partir d’un dégradé radial, généralement un cœur clair qui s’estompe à travers une couleur saturée vers un fond sombre.
- Les orbes existent sous trois styles courants : un halo doux sans contour, une sphère éclairée au bord net et un anneau d’éclipse au centre sombre.
- Un orbe ne brille de façon convaincante que sur un fond sombre ou profondément coloré, car la lueur est un contraste avec ce qui l’entoure.
- Placez l’orbe loin du titre, en général en haut et sur un côté, et laissez les mots sur le fond calme.
- En CSS, un orbe est une couche de dégradé radial ou un élément circulaire flouté placé derrière le contenu.

Un **orbe en dégradé** est une sphère lumineuse créée avec un dégradé radial : un cœur clair, une bande de couleur saturée et un long fondu vers un fond sombre. Il est devenu un favori des pages de lancement produit, des en-têtes d’applis, des visuels de podcast et des pochettes d’album, car une seule forme donne à une création un point focal, de la profondeur et une impression d’énergie sans la moindre photo. La recette est courte. Ce qui distingue un orbe saisissant d’une tache floue, c’est le fond derrière lui, la couleur de son cœur et l’endroit où vous le placez.

## Trois types d’orbes en dégradé

- **Halo doux :** aucun contour, juste de la lumière qui éclot dans l’obscurité. Calme, atmosphérique, idéal derrière de grandes mises en page.
- **Sphère éclairée :** un bord rond et net avec un reflet d’un côté, qui se lit comme une planète ou une boule de verre. Audacieux et graphique. Les règles d’éclairage sont dans [les formes en dégradé](https://gradiently.design/fr/guide/gradient-shapes).
- **Anneau d’éclipse :** un disque sombre avec de la lumière qui déborde de son pourtour. Dramatique, nocturne, prisé pour la musique et la tech.

## Recettes d’orbes en dégradé

Chaque recette est un simple `radial-gradient()` à coller dans votre CSS ou votre outil de design. Le premier arrêt est le cœur, les arrêts du milieu forment le corps coloré, et le dernier arrêt est le fond. Repousser l’arrêt du fond élargit le halo.

- Halo violet: `radial-gradient(circle at 50% 50%, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`
- Halo cyan: `radial-gradient(circle at 50% 50%, #ecfeff 0%, #67e8f9 9%, #0891b2 24%, #083344 48%, #020617 74%)`
- Halo braise: `radial-gradient(circle at 50% 50%, #fff7ed 0%, #fdba74 10%, #f43f5e 28%, #4c0519 52%, #0c0507 76%)`
- Halo émeraude: `radial-gradient(circle at 50% 50%, #f0fdf4 0%, #86efac 8%, #059669 22%, #022c22 46%, #010805 72%)`
- Anneau d’éclipse: `radial-gradient(circle at 50% 50%, #0b0a1a 0%, #0b0a1a 24%, #fde68a 25%, #f97316 28%, #7c2d12 38%, #0b0a1a 60%)`
- Halo irisé: `radial-gradient(circle at 50% 50%, #fdf2f8 0%, #f9a8d4 12%, #a855f7 30%, #3b82f6 46%, #0b1026 70%)`

Six orbes sur fonds sombres. L’irisé change de teinte en s’estompant, du rose au violet puis au bleu, ce qui se lit comme une surface brillante.

Évitez un cœur blanc pur. Un blanc teinté de la couleur de l’orbe, comme `#faf5ff` dans un orbe violet, garde le centre lumineux sans paraître brûlé. Évitez aussi un fond noir pur : un quasi-noir avec une pointe de la teinte de l’orbe donne l’impression que la lueur appartient à l’espace.

## Pourquoi les orbes ont besoin d’un fond sombre

La lueur, c’est du contraste. Sur une page blanche, le même orbe violet ressemble à un bleu sur la peau ; sur un fond d’encre profonde, il ressemble à de la lumière. Si votre marque vit sur des fonds clairs, utilisez un orbe pastel pâle avec un fondu doux et large, et acceptez qu’il se lise comme une floraison de couleur plutôt que comme une lueur. [Les fonds en dégradé sombres](https://gradiently.design/fr/guide/dark-gradient-backgrounds) propose des fonds qui s’associent bien avec chaque orbe ci-dessus.

- Fond encre violette: #0b0a1a
- Fond encre marine: #020617
- Fond encre rouge: #0c0507
- Fond encre verte: #010805

Quatre quasi-noirs, chacun teinté vers un orbe. Accordez le fond à l’orbe et la lueur paraît naturelle.

## Où placer un orbe en dégradé

Un orbe est l’élément le plus lumineux du cadre, donc il attire l’œil avant tout le reste. C’est un atout si votre titre est à côté, et un problème s’il est posé dessus. Placez l’orbe en haut et sur un côté, coupez-le au bord s’il est grand, et gardez les mots sur un fond sombre et calme. N’utilisez jamais un orbe comme halo derrière du texte : il réduit le contraste exactement là où vous en avez le plus besoin.

- En-tête de site 1920×1080: 1920 × 1080
- Publication Instagram 1080×1350: 1080 × 1350
- Couverture de playlist 1080×1080: 1080 × 1080
- Story 1080×1920: 1080 × 1920

Sur un en-tête large, placez l’orbe du côté opposé au titre. Sur les formats hauts, placez-le dans le tiers supérieur avec les mots en dessous.

Une couverture de podcast carrée avec une lumière violette brillante en haut du cadre et le titre de l’émission en dessous sur fond sombre

Une couverture de podcast en 3000×3000. La lumière est au-dessus du titre, jamais en dessous.

Une large bannière de lancement produit avec le titre à gauche et une zone lumineuse et brillante à droite

Un en-tête de lancement en 1920×1080, avec les mots à gauche et la zone la plus lumineuse à droite.

## Un en-tête avec orbe en dégradé en CSS

La méthode la plus simple est une couche de dégradé radial sur la section elle-même. Pour une lueur plus douce et plus organique, utilisez un élément circulaire séparé avec un fort flou, ce qui vous permet aussi de l’animer lentement sans redessiner toute la section.

```css
.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 30%, #faf5ff 0%, #c4b5fd 6%, #7c3aed 16%, #2e1065 34%, transparent 55%),
    #0b0a1a;
  color: #f5f3ff;
}

/* Optional: a soft second light, blurred */
.hero::before {
  content: "";
  position: absolute;
  width: 40vmax;
  aspect-ratio: 1;
  left: -12vmax;
  bottom: -18vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #0891b2 0%, transparent 65%);
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
}

.hero > * {
  position: relative;
}
```

Un orbe violet en haut à droite sur un fond d’encre, avec une faible lumière cyan qui s’infiltre en bas à gauche. Le contenu se trouve au-dessus des deux.

> **Les grands flous ont un coût** Un gros `filter: blur()` sur un élément en mouvement peut faire sauter des images sur les téléphones anciens. N’animez que `transform`, gardez un rayon de flou modéré, et lisez [les performances des dégradés CSS](https://gradiently.design/fr/guide/css-gradient-performance) avant de mettre en ligne.

## Animer un orbe en dégradé

Un orbe qui dérive de quelques pour cent dans le cadre, ou qui respire en grandissant et rétrécissant légèrement, paraît vivant sans distraire des mots. Gardez un cycle long, entre 10 et 20 secondes, avec des accélérations et décélérations douces pour que le mouvement ne semble jamais commencer ni s’arrêter. Sur les formats sociaux, exportez-le en courte boucle dont la dernière image correspond à la première : [la vidéo en boucle sans raccord](https://gradiently.design/fr/guide/seamless-loop-video) explique comment. Sur le web, déplacez l’élément flouté avec `transform` et coupez le mouvement pour les visiteurs qui demandent [moins d’animations](https://gradiently.design/fr/guide/reduced-motion).

## Comment rendre un orbe en dégradé original

### Orbe générique

- Violet vers bleu, centré, sur noir
- Un cœur blanc pur qui sature
- Placé derrière le titre
- Parfaitement lisse, avec des bandes dans le fondu

### Orbe réfléchi

- Une couleur de marque avec un glissement de teinte dans le fondu
- Un cœur teinté qui reste lumineux
- Décalé, coupé, avec les mots sur un fond calme
- Un grain fin sur le fondu pour le garder lisse

L’orbe est désormais si courant qu’un orbe par défaut ressemble à un template. Une seconde lumière plus faible, un glissement de teinte dans le fondu ou une couche de [grain](https://gradiently.design/fr/guide/grainy-gradients) le rendent plus reconnaissable. Les Marks de Gradiently vont plus loin : chacun est un fond vivant avec sa propre lumière, ses matières et son mouvement, vérifié pour que deux d’entre eux ne se ressemblent jamais, et il s’affiche dans toutes les tailles où vous créez. Parcourez les Marks sombres sur le Marché et créez gratuitement avec n’importe lequel qui n’est pas réservé.

## FAQ

### Comment créer un orbe en dégradé ?

Utilisez un dégradé radial avec un cœur blanc teinté, une bande de couleur saturée et un fond sombre, par exemple `radial-gradient(circle, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`.

### Quel fond fonctionne le mieux derrière un orbe en dégradé ?

Un quasi-noir teinté vers la couleur de l’orbe. Une lueur ne se lit comme une lueur que sur un environnement sombre.

### Peut-on mettre du texte sur un orbe en dégradé ?

Évitez-le. L’orbe est la partie la plus lumineuse du cadre, donc le texte posé dessus perd en contraste. Placez l’orbe sur un côté et gardez les mots sur un fond calme.

### Comment créer un orbe flou en CSS ?

Créez un élément circulaire avec un dégradé radial qui s’estompe jusqu’à transparent, puis appliquez `filter: blur()`. Positionnez-le en absolu derrière le contenu.