Fond en dégradé : comment éviter le résultat générique

Pour faire un fond en dégradé qui ne paraisse pas générique, choisissez d’abord une couleur de fond de base, ajoutez trois à cinq couleurs apparentées plutôt que deux, donnez à la surface une matière comme le grain ou une lumière douce, et gardez une zone calme où se poseront les mots. La plupart des fonds en dégradé sautent chacune de ces étapes : ils prennent un préréglage à deux couleurs, le font courir d’un coin à l’autre et s’arrêtent là. C’est pourquoi tant d’entre eux paraissent interchangeables.

Pourquoi la plupart des fonds en dégradé se ressemblent

Les outils de design, les générateurs et les modèles proposent tous la même courte liste de fondus, et les tendances poussent tout le monde vers les mêmes teintes au même moment. Violet vers rose, bleu vers cyan et orange vers magenta sont agréables, mais tellement répandus qu’ils se lisent comme un réglage par défaut plutôt qu’un choix. Le schéma plus large est expliqué dans pourquoi tous les fils se ressemblent.

Étape 1 : choisissez un fond de base

Le fond de base est la couleur sur laquelle repose le dégradé et à laquelle il revient. Il donne l’ambiance plus que tout accent. Un fond presque noir fait rayonner la couleur et paraît premium et nocturne ; un fond blanc cassé chaud paraît imprimé, calme et éditorial. Choisissez-en un avant de choisir le moindre accent, et gardez-le pour toute la série de designs.

Si vous choisissez le sombre, lisez les fonds en dégradé sombres avant d’exporter, car c’est dans les fondus sombres que le banding se voit le plus.

Étape 2 : choisissez trois à cinq couleurs apparentées

Deux couleurs font le dégradé le plus facile à faire et le plus facile à copier. Une petite famille donne de la profondeur : un ton d’ombre, un ton principal, un éclat et un accent utilisé avec parcimonie. Gardez les voisines proches sur le cercle chromatique pour que les fondus restent nets, et laissez l’accent à part. Des couleurs opposées placées côte à côte virent au gris là où elles se rencontrent, ce que traitent les dégradés boueux.

Étape 3 : donnez-lui une matière

Un fondu numérique net ressemble à un réglage d’écran par défaut. Une matière le fait ressembler à une surface. Le grain se lit comme du film ou de l’impression, le grain du papier comme de l’artisanat, un lustre vitreux comme de la technologie et une soie douce comme du luxe. Il n’en faut pas beaucoup : une couche de bruit à faible opacité suffit à changer l’impression. La texture des dégradés compare les familles, et les dégradés granuleux donnent le code.

Étape 4 : prévoyez où vont les mots

Un fond existe pour porter quelque chose : un titre, un prix, une date. Décidez où se posent ces mots avant de finir le dégradé, et gardez cette zone plus calme et plus contrastée. Placez la couleur la plus vive et la plus chargée loin du texte, en général dans un coin, et laissez le fond de base se montrer derrière les mots. Pour les règles de contraste, voyez le contraste des couleurs et l’accessibilité.

Étape 5 : rendez-le pour chaque format

Un dégradé qui convient à un post carré peut paraître faux en story verticale, car le recadrage déplace la zone vive. Traitez le fond comme une recette que vous rendez à chaque taille, en ajustant l’endroit où tombe la lumière, plutôt que comme une image unique que vous recadrez.

Post 1080×1350

1080 × 1350

Story 1080×1920

1080 × 1920

Bandeau de site 1920×1080

1920 × 1080

Bannière de blog 1200×600

1200 × 600

Un fond en dégradé en CSS

Sur le web, un dégradé pleine page a un bug classique : si la page est courte, le fond se répète en bandes. Donnez à l’élément racine une hauteur minimale, définissez une couleur de repli unie qui s’affiche aussi lors du défilement excessif, puis superposez le dégradé.

html {
  min-height: 100%;
  background-color: #0f0b1e; /* fallback, and the colour seen on overscroll */
}

body {
  min-height: 100vh;
  margin: 0;
  background-image:
    radial-gradient(circle at 80% 15%, #6d28d9 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #312e81 0%, transparent 50%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

Pour une section de bandeau plutôt que toute une page, les mêmes couches fonctionnent sur la section elle-même. Les fonds de bandeau de site web traitent de la taille et des performances.

Posséder votre fond en dégradé

Même un fond soigneusement fait peut être copié et réutilisé. Dans Gradiently, un fond terminé est un Mark : une recette de couleurs, de matières, de lumière, de grain et de mouvement avec exactement un propriétaire à la fois. Il se rend à chaque taille dans laquelle vous créez et fait de la place à vos mots tout seul. Vous pouvez créer avec n’importe quel Mark gratuitement, et en réserver un pour en faire le vôtre.