L’essentiel en bref
- Les peintres mélangeaient les couleurs bien avant les écrans, avec des transitions douces de tons et des lointains bleutés et brumeux pour suggérer la profondeur et la lumière.
- Les premiers écrans d’ordinateur affichaient trop peu de couleurs pour des mélanges lisses : les dégradés apparaissaient donc en bandes visibles ou en motifs tramés.
- L’interface Aqua d’Apple, dévoilée en 2000, a fait des dégradés brillants un style emblématique de la décennie suivante.
- Le flat design a repoussé les dégradés au début des années 2010, de façon très visible avec Windows 8 en 2012 et iOS 7 en 2013.
- Les dégradés sont revenus au milieu des années 2010, avec l’icône en dégradé d’Instagram en 2016 comme exemple le plus connu, puis se sont étendus au maillage, au grain et aux rendus pilotés par shaders.
Sur cette page
L’histoire des dégradés en design, c’est celle de la technologie qui rattrape la peinture. Les artistes fondent les couleurs depuis des siècles ; l’imprimerie a appris à le simuler avec des points et de l’encre divisée ; les premiers écrans pouvaient à peine l’afficher ; les interfaces brillantes des années 2000 en ont abusé ; le flat design l’a retiré ; et au milieu des années 2010, il est revenu sans jamais vraiment repartir. Les dégradés de chaque époque ont l’allure qu’ils ont à cause des outils du moment.
Voici une histoire courte et pratique, avec le style de chaque époque sous forme de dégradé à copier. Pour les bases, voir qu’est-ce qu’un dégradé et les types de dégradés.
| Quand | Ce qui s’est passé | Le style de dégradé |
|---|---|---|
| Renaissance | Sfumato et perspective aérienne en peinture | Mélanges tonals doux, lointain bleuté et brumeux |
| 1704 | L’Opticks de Newton dispose le spectre en cercle | Le premier cercle chromatique |
| Fin des années 1800 | L’impression en similigravure | Des tons faits de points |
| Début des années 1990 | Écrans à 256 couleurs | Banding et tramage |
| 2000 à 2007 | Aqua, Luna de Windows XP, Web 2.0, Aero de Vista | Brillant, gel et verre |
| 2012 à 2014 | Windows 8, iOS 7, Material Design | Couleur unie, mélanges légers |
| 2016 | L’icône en dégradé d’Instagram | Le retour des mélanges vifs |
| Fin des années 2010 et après | Maillage, conique, grain, shaders | Champs de lumière doux et mouvement |
Les dégradés avant les écrans : peinture et imprimerie
Les peintres fondaient les couleurs bien avant que quiconque parle de dégradé. Les artistes de la Renaissance employaient le sfumato, des transitions douces de tons sans contours nets, une technique célèbre associée à Léonard de Vinci. Les paysagistes utilisaient la perspective aérienne : les collines lointaines s’effacent dans une brume pâle et bleutée, et le ciel s’éclaircit vers l’horizon, le plus ancien dégradé que la plupart d’entre nous connaissent.
linear-gradient(180deg, #4f74a3 0%, #8fadc9 50%, #e9dcc0 100%)La science a donné de l’ordre aux mélanges de couleurs. Les expériences de prisme d’Isaac Newton ont étalé la lumière blanche en un spectre continu, et son Opticks (1704) a disposé ses couleurs en cercle, l’ancêtre de tout cercle chromatique.
L’imprimerie devait simuler le ton continu. Les trames de similigravure, mises au point à la fin du XIXe siècle, transformaient les nuances en points de tailles différentes. Les imprimeurs utilisaient aussi l’encrier divisé : deux encres ou plus chargées côte à côte sur une même presse, qui se fondent l’une dans l’autre sur les rouleaux, une technique toujours appréciée en sérigraphie et en typographie. L’aérographe donnait aux illustrateurs des mélanges lisses à la main et a façonné une bonne part des affiches et des pochettes d’album des années 1970 et 1980.
Les premiers écrans : banding, tramage et images répétées
Les premiers écrans d’ordinateur ne pouvaient afficher qu’un ensemble limité de couleurs à la fois, et les palettes de 256 couleurs courantes au début des années 1990 ne pouvaient pas porter un mélange lisse. Les dégradés se brisaient en rayures visibles, le banding, ou étaient tramés en motifs de points que l’œil moyennait en un mélange. Les mêmes rayures apparaissent encore quand un dégradé est long et subtil ; voir le banding des dégradés.
Le web des débuts n’avait aucune fonction de dégradé. Les designers créaient une image de dégradé large d’un pixel et disaient au navigateur de la répéter sur la page. Le SVG, une recommandation du W3C de 2001, incluait bien des dégradés linéaires et radiaux, mais les dégradés CSS sont venus plus tard : WebKit a introduit une syntaxe préfixée à la fin des années 2000, la version standard a été écrite dans CSS Images Level 3, et au début des années 2010 tous les grands navigateurs savaient dessiner un dégradé sans image.
/* Early 2000s: a 1px-wide image, repeated across */
.header { background: #2b7ae0 url(header-bg.png) repeat-x; }
/* 2010s: the browser draws the gradient */
.header { background: linear-gradient(180deg, #6fb4f5, #2b7ae0); }
/* Now: the same blend, interpolated in OKLCH */
.header { background: linear-gradient(180deg in oklch, #6fb4f5, #2b7ae0); }Les années 2000 brillantes : Aqua, Luna et Web 2.0
Apple a dévoilé l’interface Aqua de Mac OS X en 2000 : des boutons translucides et brillants qui ressemblaient à des gouttes de gel coloré, avec un reflet lumineux sur le haut. Windows XP a suivi en 2001 avec son thème Luna, ses barres de titre bleues à dégradé et son bouton Démarrer vert. Au milieu de la décennie, les boutons brillants, les logos réfléchissants et les ombres douces étaient si courants sur les sites web que ce style est devenu le symbole du Web 2.0.
Le verre Aero de Windows Vista, en 2007, a poussé plus loin la translucidité. Le problème était la répétition : quand chaque bouton, badge et logo portait le même reflet, le brillant a cessé de signaler la qualité pour signaler un modèle. Le guide sur l’esthétique Y2K couvre le style plus large de ces années.
Le virage du flat design : Metro et iOS 7
Le langage de design Metro de Microsoft, d’abord sur Windows Phone puis dans tout Windows 8 en 2012, employait des tuiles de couleur unie, une typographie simple et aucun brillant. iOS 7 d’Apple, en 2013, a abandonné le cuir cousu, le feutre et les textures des versions précédentes pour un design plat et clair. Le Material Design de Google, présenté en 2014, gardait la couleur plate mais utilisait l’ombre pour montrer les couches.
Années 2000 brillantes
- Un reflet net à mi-hauteur
- Reflets et biseaux
- Des dégradés sur chaque commande, en décoration
- Des imitations de vraies matières
Années 2010 plates
- Couleur unie ou léger mélange de deux tons
- Pas de biseaux, ombre minimale
- La couleur sert à organiser, pas à décorer
- Le texte et l’espace font le travail
Les dégradés n’ont pas disparu ; ils ont changé de caractère. Beaucoup des nouvelles icônes d’applications d’iOS 7 utilisaient des dégradés lumineux et doux de haut en bas au lieu du brillant, un indice de ce qui allait venir.
Le retour du dégradé : Instagram et le milieu des années 2010
En 2016, Instagram a remplacé son icône d’appareil photo par un simple contour sur un dégradé du chaud au violet, l’un des dégradés de marque les plus visibles jamais créés. À la même époque, applications et marques ont commencé à associer des mises en page plates à des dégradés vifs et audacieux, souvent deux couleurs mélangées selon un angle. Le flat design avait déblayé la décoration ; les dégradés sont revenus comme couleur et ambiance plutôt que comme faux brillant.
Ce succès a eu un coût. Les générateurs et les outils de design ont livré les mêmes paires, et à la fin de la décennie beaucoup de fils se ressemblaient, un problème traité dans pourquoi tous les fils se ressemblent.
Les dégradés aujourd’hui : maillage, grain, shaders et mouvement
Le dernier chapitre parle de richesse et de contrôle. Les dégradés maillés, avec plusieurs points de couleur qui tirent dans des directions différentes, sont passés d’outils vectoriels spécialisés aux applications de design courantes. conic-gradient(), défini dans CSS Images Level 4, est arrivé dans les navigateurs en 2018. Les shaders WebGL permettent aux sites de rendre des dégradés qui bougent et réagissent en temps réel, le grain est revenu pour que la couleur numérique paraisse physique, et en 2025 Apple a présenté Liquid Glass, un matériau translucide sur toutes ses plateformes.
radial-gradient(ellipse at 30% 25%, #ffd6a5 0%, #f28482 30%, #6d3fa0 65%, #1a1033 100%)La toute dernière idée, c’est qu’un dégradé peut être une identité avec un propriétaire, pas un style que n’importe qui peut échantillonner. Les Marks de Gradiently sont des dégradés vivants : couleurs, matières, lumière, grain et mouvement en une seule recette, chacun avec un code public et un seul propriétaire à la fois. Pour la suite, voir les tendances dégradés 2026.
GR·BBGB·1K
Lilac Pulse
Voir ce MarkLes questions qu’on nous pose
Quand les dégradés CSS ont-ils été introduits ?
WebKit a introduit une syntaxe de dégradé préfixée à la fin des années 2000, et les valeurs standard linear-gradient() et radial-gradient() ont été définies dans CSS Images Level 3. Au début des années 2010, tous les grands navigateurs les prenaient en charge sans image.
Pourquoi les dégradés sont-ils passés de mode ?
À la fin des années 2000, les dégradés brillants étaient sur presque chaque bouton et chaque logo : ils ont cessé de paraître spéciaux. Le flat design, mené par Windows 8 en 2012 et iOS 7 en 2013, les a remplacés par de la couleur unie et une typographie simple.
Quand les dégradés sont-ils revenus à la mode ?
Au milieu des années 2010. L’icône en dégradé d’Instagram de 2016 est l’exemple le plus connu, et les mélanges vifs de deux couleurs se sont répandus peu après dans les applications, les sites et les marques.
Qu’était l’interface Aqua d’Apple ?
Aqua était le style qu’Apple a dévoilé pour Mac OS X en 2000, avec des boutons brillants en forme de gel et des surfaces translucides. Elle a fixé le style de dégradé brillant de la décennie.
Qu’est-ce qui a suivi le flat design ?
Des mises en page plates avec des couleurs riches : d’abord des dégradés vifs, puis les dégradés maillés, le grain, le mouvement piloté par shaders et, plus récemment, des matériaux translucides comme le Liquid Glass d’Apple.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
