# Points de couleur d’un dégradé : où placer chaque couleur [Canonical HTML page](https://gradiently.design/fr/guide/gradient-stops) Deux dégradés aux couleurs identiques peuvent n’avoir rien en commun. La différence tient à l’endroit où se placent les points et à la façon dont le fondu voyage entre eux. C’est la partie d’un dégradé que presque personne ne touche. ## The short version - Les points de couleur d’un dégradé sont les endroits où une couleur précise est atteinte, écrits comme une couleur suivie d’une position, par exemple `#7c3aed 40%`. - Les points sans position sont répartis à égale distance, ce qui est rarement le choix le plus naturel. - Une indication de couleur est un pourcentage isolé entre deux points, qui déplace le milieu de leur fondu sans ajouter de couleur. - Deux points à la même position créent un bord net : c’est ainsi qu’on dessine des rayures et des bandes franches en CSS. - Ajouter plusieurs points intermédiaires qui suivent une courbe d’accélération supprime la ligne visible là où un fondu linéaire commence et finit. Les **points de couleur d’un dégradé** sont les endroits où un dégradé atteint une couleur précise. En CSS, chaque point est une couleur avec une position facultative, comme `#7c3aed 40%`, et le navigateur fond en ligne droite entre les points voisins. Leur placement décide de presque tout : un fondu doux ou abrupt, une couleur qui domine ou non, une jointure visible ou non là où un fondu démarre. Déplacer les points améliore souvent plus un dégradé que changer ses couleurs. ## Comment fonctionnent les points de couleur La ligne d’un dégradé va de 0 à 100 pour cent. Chaque point épingle une couleur à un endroit de cette ligne. Sans positions, le navigateur répartit les points à égale distance, donc trois couleurs tombent à 0, 50 et 100 pour cent. Entre chaque paire, la couleur change à vitesse constante. La syntaxe complète est documentée dans [la référence linear-gradient() de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient). | Vous écrivez | Ce qui se passe | | --- | --- | | `#1e3a8a, #f472b6` | Deux points à 0 % et 100 % | | `#1e3a8a 20%, #f472b6 80%` | Marine uni jusqu’à 20 %, fondu, rose uni après 80 % | | `#1e3a8a, 30%, #f472b6` | Une indication de couleur : le milieu passe à 30 % | | `#1e3a8a 50%, #f472b6 50%` | Un bord net au centre, aucun fondu | | `#1e3a8a 0 40%, #f472b6 40% 100%` | Double position : deux bandes unies | | `#1e3a8a 10px, #f472b6 200px` | Les longueurs fonctionnent aussi bien que les pourcentages | La syntaxe des points en CSS. Les mêmes idées s’appliquent dans Figma, Photoshop et tout éditeur de dégradé, simplement avec des curseurs. ## Pourquoi des points équidistants paraissent artificiels La lumière réelle change rarement à vitesse constante. Un coucher de soleil est surtout d’une couleur avec une étroite bande de transition près de l’horizon ; une ombre est surtout un ton moyen avec une courte chute sur son bord. Un espacement égal donne à chaque couleur la même part, ce qui ressemble à un graphique. Décidez quelle couleur mène et laissez-la occuper l’essentiel de l’espace. - Égal : 0, 50, 100: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 50%, #be123c 100%)` - Pondéré : le bleu mène: `linear-gradient(180deg, #0c4a6e 0%, #0e7490 58%, #f59e0b 84%, #be123c 100%)` - Pondéré : haut chaud: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 22%, #be123c 40%, #4c0519 100%)` Une palette, trois placements. Les versions pondérées évoquent un ciel à deux moments différents ; la version égale semble générée. ## Indications de couleur : déplacer le milieu Une indication de couleur est un simple pourcentage placé entre deux points. Elle n’ajoute pas de couleur ; elle déplace l’endroit où le fondu est exactement à mi-chemin. Une indication à 20 pour cent signifie que le milieu arrive tôt : la seconde couleur apparaît vite, puis s’attarde. Les indications sont le moyen le plus simple de rendre un dégradé à deux couleurs moins mécanique. - Sans indication, milieu 50 %: `linear-gradient(90deg, #4c1d95, #f9a8d4)` - Indication à 25 %: `linear-gradient(90deg, #4c1d95, 25%, #f9a8d4)` - Indication à 75 %: `linear-gradient(90deg, #4c1d95, 75%, #f9a8d4)` Le même violet vers rose. Déplacer l’indication fait dominer une couleur sans modifier ni l’une ni l’autre. ## Arrêts nets pour rayures et bandes Quand deux points partagent une position, il n’y a aucune distance sur laquelle fondre, donc la couleur change instantanément. C’est ainsi qu’on dessine rayures, fonds partagés, barres de progression et drapeaux avec un simple dégradé. La syntaxe à double position, `couleur début fin`, permet de l’écrire plus court. Les dégradés répétés reprennent la même idée en mosaïque, comme expliqué dans [les dégradés linéaires répétés](https://gradiently.design/fr/guide/css-repeating-gradient). - Moitié moitié: `linear-gradient(90deg, #0f172a 0 50%, #f8fafc 50% 100%)` - Trois bandes: `linear-gradient(180deg, #fde68a 0 33%, #fb923c 33% 66%, #e11d48 66% 100%)` - Paliers en diagonale: `linear-gradient(135deg, #312e81 0 40%, #6d28d9 40% 60%, #c084fc 60% 100%)` Des arrêts nets en action. Aucun fondu, seulement des bords. ## Points lissés : supprimer la jointure Un fondu linéaire a un début et une fin visibles. Faites passer un voile sombre vers le transparent sur une photo et vous verrez souvent une ligne là où le fondu commence, parce que la vitesse de changement saute de zéro à plein régime. Placer plusieurs points intermédiaires le long d’une courbe d’accélération règle le problème : la couleur change d’abord lentement, accélère, puis se pose. C’est particulièrement utile pour les voiles derrière du texte et pour [les dégradés transparents](https://gradiently.design/fr/guide/css-gradient-transparent). ```css /* Linear: a visible edge where the fade starts */ .scrim-linear { background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%); } /* Eased: stops follow an ease in out curve, no edge */ .scrim-eased { background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.02) 46%, rgba(10, 12, 20, 0.08) 52%, rgba(10, 12, 20, 0.18) 58%, rgba(10, 12, 20, 0.32) 66%, rgba(10, 12, 20, 0.48) 74%, rgba(10, 12, 20, 0.62) 82%, rgba(10, 12, 20, 0.73) 91%, rgba(10, 12, 20, 0.8) 100%); } ``` Les deux voiles finissent à la même intensité. Le voile lissé n’a pas de ligne à son début. > **La même idée en mouvement** Les points lissés sont la version dégradé d’une courbe d’accélération en animation. [L’easing](https://gradiently.design/fr/guide/easing) explique pourquoi une accélération douce paraît naturelle, et le même raisonnement s’applique ici. ## Placer les points : une méthode pratique 1. **Choisissez la couleur principale** Donnez-lui 50 à 70 pour cent de la ligne. C’est elle qui fixe l’ambiance. 2. **Placez la transition là où l’œil doit aller** Mettez le changement de couleur le plus rapide près du point focal, pas au milieu par défaut. 3. **Ajoutez des indications avant des couleurs** Si un fondu sonne faux, essayez d’abord de déplacer son milieu. Des couleurs en plus ajoutent de la complexité. 4. **Vérifiez les milieux** Regardez la couleur à mi-chemin de chaque paire. Si elle est grise, ajoutez une couleur pont ou fondez en OKLCH, comme expliqué dans [l’interpolation des dégradés](https://gradiently.design/fr/guide/gradient-interpolation). 5. **Lissez les longs fondus** Pour tout ce qui passe au transparent ou à une couleur unie, ajoutez des points intermédiaires afin d’éviter toute jointure. ### À éviter - La même part pour chaque couleur - Une nouvelle couleur ajoutée pour chaque problème - Des fondus linéaires vers le transparent derrière du texte - Des arrêts nets là où vous vouliez des fondus doux ### À faire - Une couleur principale, les autres arrivant tard - Des indications de couleur pour décaler un fondu - Des points lissés pour les voiles et les fondus - Des arrêts nets seulement pour les rayures et les bandes Pour voir les points sous leur forme la plus simple, [les dégradés linéaires CSS](https://gradiently.design/fr/guide/css-linear-gradient) détaillent toute la syntaxe, et [les types de dégradés](https://gradiently.design/fr/guide/types-of-gradients) montrent comment les points se comportent dans les dégradés radiaux et coniques. Dans Gradiently, un Mark gère lui-même son fondu et sa lumière à chaque taille : vous pouvez créer tout de suite et consacrer votre temps aux mots. ## FAQ ### Qu’est-ce qu’un point de couleur dans un dégradé ? Un endroit du dégradé où une couleur précise est atteinte, écrit en CSS comme une couleur avec une position facultative, par exemple `#7c3aed 40%`. ### Que se passe-t-il si je ne donne pas de position aux points ? Le navigateur les répartit à égale distance de 0 à 100 pour cent. Trois couleurs tombent à 0, 50 et 100 pour cent. ### Qu’est-ce qu’une indication de couleur dans un dégradé CSS ? Un pourcentage isolé entre deux points, comme `#4c1d95, 25%, #f9a8d4`. Il déplace le milieu du fondu sans ajouter de couleur. ### Comment créer une ligne nette dans un dégradé CSS ? Donnez la même position à deux points, par exemple `#0f172a 50%, #f8fafc 50%`, ou utilisez la syntaxe à double position `#0f172a 0 50%, #f8fafc 50% 100%`. ### Comment faire un fondu doux vers le transparent ? Ajoutez plusieurs points intermédiaires dont l’opacité suit une courbe d’accélération douce. Un simple fondu à deux points laisse souvent voir une ligne à son début.