Les matières de dégradé expliquées : soie, aurore, grain et les autres

Les matières de dégradé font qu’un dégradé ressemble à quelque chose plutôt qu’à un simple fondu entre deux couleurs. Une matière est la structure que la couleur remplit : un lustre directionnel dans Soie, des rideaux de lumière dans Aurore, des éclosions douces dans Maillage, du sable dans Limon, des veines dans le marbre. Chaque Mark Gradiently en empile jusqu’à trois, puis ajoute lumière, grain et mouvement, et c’est pourquoi deux Marks de même palette peuvent ne pas se ressembler du tout.

Ce qu’est une matière

Voyez la palette comme la peinture et la matière comme la surface sur laquelle on l’applique. Versez le même marine, le même bleu canard et le même orange sur de la soie, du verre dépoli ou du papier fait main, et vous obtenez trois objets différents. Dans un Mark, chaque matière puise dans la palette du Mark : changer de matière change le caractère sans changer les couleurs.

Les quatorze familles de matières

Gradiently regroupe ses matières en familles selon ce à quoi elles ressemblent. Les noms ci-dessous sont de vraies matières que vous croiserez sur le Marché ; chaque famille en contient bien d’autres.

Soie, aurore et maillage

Ce sont les trois matières sur lesquelles on pose le plus de questions. Soie est un lustre directionnel sur des fils fins : élégante, un peu formelle, à l’aise avec la beauté et la mode. Aurore, ce sont des rideaux de lumière qui montent d’un ourlet lumineux vers un ciel sombre, spectaculaires sur un fond noir. Maillage, ce sont des éclosions de couleur douces qui se fondent les unes dans les autres, le dégradé moderne par excellence, aimable et polyvalent. Les dégradés soie, les dégradés aurore et les dégradés maillés ont chacun leur guide avec du CSS.

Grain, papier et impression

La famille Grain donne à un écran l’air d’un imprimé. Fibre est un papier fait main aux longues fibres parsemé de quelques points, Riso une impression à deux encres, Pellicule du grain argentique, Tramage une couleur en paliers de pixels. Elles conviennent à l’alimentation, à l’artisanat, aux livres et à tout ce qui doit sembler fait à la main. Elles masquent aussi le banding, ces bandes qui apparaissent dans les dégradés lisses, comme l’expliquent les dégradés granuleux.

Comment les couches s’empilent

Un Mark a une couche de base et jusqu’à deux autres par-dessus. Chaque couche supérieure a sa propre opacité et un mode de fusion (normal, superposition claire, produit, incrustation ou doux), comme les calques d’un logiciel de retouche photo. Une recette courante associe une base large comme Maillage ou Brume pour le champ de couleur, une couche structurelle comme Lin ou Trame pour la texture, et une couche de lumière comme Halo ou Fuite pour attirer le regard.

.card {
  background:
    /* top layer: a light, screened over the rest */
    radial-gradient(circle at 75% 20%, rgb(255 214 170 / 0.55) 0%, transparent 40%),
    /* middle layer: a fine stripe for texture */
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px),
    /* base layer: the colour field */
    linear-gradient(160deg, #1b2a3a 0%, #2f5d62 60%, #5e8b7e 100%);
  background-blend-mode: screen, overlay, normal;
}

Lumière, grain et mouvement

Dans chaque couche, quelques réglages changent le comportement de la matière : son échelle, sa déformation, la finesse de ses détails, l’intensité de son éclairage, la quantité de grain qu’elle porte et son mouvement. La même Soie peut être un miroitement serré et lumineux ou un drapé large et sombre. Le mouvement est commun à tout le Mark, avec sa propre vitesse et sa dérive, pour que les couches bougent ensemble plutôt que les unes contre les autres.

Le détail et les mots se font concurrence, c’est pourquoi les Marks apaisent d’eux-mêmes les détails chargés près du texte. Un Mark sait où sont les mots : sa zone la plus calme se place derrière le texte et les couleurs proches des lettres s’assombrissent ou s’éclaircissent, si bien que même une matière texturée garde votre titre lisible.

Comment choisir une matière

Demandez-vous de quoi votre marque est faite. Une boulangerie, c’est de la farine, du papier et une lumière chaude : Fibre ou Lavis. Un studio qui vend du logiciel, c’est du verre et une lumière nette : Dépoli ou Prisme. Demandez-vous ensuite à quelle fréquence vous publierez dessus : plus c’est souvent, plus il doit être calme. Comment choisir le bon Mark détaille le reste de la décision, et le Marché permet de filtrer directement par matière.