Formes en dégradé : blobs, orbes et sphères qui semblent réelles

Les formes en dégradé sont des blobs, orbes, sphères et pilules remplis d’un fondu qui les fait paraître éclairés, comme s’ils avaient du volume. Elles semblent réelles quand l’ombrage suit une seule source de lumière : un reflet vif du côté tourné vers la lumière, une ombre propre plus sombre du côté opposé, un léger liseré de lumière réfléchie tout au bord, et une ombre douce au sol. Oubliez l’un de ces éléments et la forme se lit comme un autocollant plat recouvert d’un dégradé. Réussissez-les et deux couleurs suffisent à suggérer un objet solide.

Comment la lumière tombe sur une forme ronde

Les peintres le décrivent depuis des siècles, et cela vaut pour chaque forme ronde que vous dessinez. Choisissez une direction de lumière avant de choisir une couleur, puis ombrez chaque zone dans l’ordre. En haut à gauche est la convention parce que le lecteur l’attend, mais toute direction fonctionne si vous restez cohérent.

Des recettes d’ombrage à copier

Ces nuanciers sont des études de lumière : l’ombrage que vous placeriez dans un cercle, un cylindre ou un cône. Chacun est éclairé depuis le haut à gauche. Appliquez-les à une forme aux coins arrondis et ils deviennent des objets solides.

Les recettes de sphère se terminent sur une couleur un peu plus claire que la précédente. Ce dernier arrêt est le liseré réfléchi, placé juste à l’intérieur du bord du cercle pour survivre au découpage. Sans lui, le bord de la forme devient inerte et elle ressemble à un trou plutôt qu’à une boule. Le guide du dégradé radial explique comment la position du centre et la taille changent l’atténuation.

Créer une sphère en dégradé en CSS

Faites de l’élément un cercle avec border-radius: 50%, puis déplacez le centre du dégradé vers la lumière. Le cercle découpe le dégradé, si bien que le reflet se place hors centre dans une forme parfaitement ronde. Une ellipse floue et aplatie en dessous donne l’ombre portée.

.sphere {
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%,
    #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%);
  position: relative;
}

.sphere::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(30, 10, 70, 0.45) 0%, rgba(30, 10, 70, 0) 70%);
  filter: blur(6px);
  z-index: -1;
}

.blob {
  width: 280px;
  aspect-ratio: 1;
  border-radius: 62% 38% 46% 54% / 55% 42% 58% 45%;
  background: radial-gradient(circle at 32% 30%,
    #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%);
}

Blobs, pilules et formes organiques

Les blobs paraissent amicaux et doux, d’où leur succès auprès des marques de bien-être, d’alimentation, pour enfants et créatives. Ils suivent les mêmes règles de lumière qu’une sphère, mais leurs renflements attrapent des reflets à plusieurs endroits. Gardez un reflet principal et laissez les autres discrets. Le style lui-même est détaillé dans les formes organiques en design.

• Pilule : un rectangle arrondi ombré comme un cylindre, la lumière courant sur sa longueur.
• Galet : une sphère aplatie, avec un reflet large et peu contrasté, comme une pierre mate.
• Goutte : une sphère avec un reflet vif et net et un liseré réfléchi marqué, qui paraît brillante.
• Blob nuage : des cercles qui se chevauchent avec un seul reflet commun, pour se lire comme une seule forme.

Pourquoi les formes en dégradé paraissent plates, et comment y remédier

La température de couleur fait une grande partie du travail. Une lumière chaude donne des ombres froides et une lumière froide des ombres chaudes. Une sphère violette sous un reflet légèrement rosé avec une ombre propre bleu violet paraît bien plus réelle qu’une sphère qui passe simplement du violet clair au violet foncé. Couleurs chaudes et froides explique ce duo.

Utiliser des formes en dégradé dans une mise en page

1. 1

   Choisissez une source de lumière

   Notez-la : en haut à gauche, chaude. Chaque forme, ombre et reflet la suit.

2. 2

   Utilisez trois tailles

   Une grande forme, une moyenne et une petite se lisent comme de la profondeur. Cinq blobs identiques se lisent comme des confettis.

3. 3

   Laissez les formes sortir du cadre

   Recadrer la plus grande forme sur un bord donne l’impression d’une toile plus grande que ses limites.

4. 4

   Gardez une zone calme pour les mots

   Les formes sont chargées. Placez-les autour du titre, jamais derrière.

5. 5

   Ajoutez du grain

   Une fine couche de bruit donne à un ombrage numérique lisse un aspect imprimé et masque les bandes. Voir les dégradés granuleux.

Si vous préférez ne pas ombrer les formes à la main, les Marks de Gradiently sont des arrière-plans vivants faits de matières superposées, de lumière et de grain, et ils s’affichent nettement à chaque taille de création. Pour une sphère lumineuse unique utilisée comme image principale, voir les orbes en dégradé.