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

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é.
• 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.

É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 propose des fonds qui s’associent bien avec chaque orbe ci-dessus.

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.

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.

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

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

Comment rendre un orbe en dégradé original

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