Générateur de Dégradés CSS

Les dégradés sont des images, pas des couleurs

Un dégradé CSS est généré par les fonctions linear-gradient, radial-gradient ou conic-gradient, et chacune produit une valeur d'image, et non une couleur. Ce simple fait explique l'essentiel du comportement des dégradés. Parce que le résultat est une image, vous l'affectez à une propriété qui accepte des images, le plus souvent background ou background-image, et il se répète, se met à l'échelle et s'empile comme n'importe quel autre arrière-plan. Il n'a pas non plus de taille intrinsèque ; il remplit la boîte dans laquelle vous le placez, et c'est pourquoi un même dégradé peut paraître abrupt sur un bouton et doux à travers une section d'en-tête.

Les dégradés linéaires et la direction

Un dégradé linéaire fond les couleurs le long d'un axe droit. Vous définissez cet axe soit avec un angle, soit avec une direction par mot-clé. Les angles se mesurent dans le sens des aiguilles d'une montre à partir de la verticale, si bien que 0deg va de bas en haut, 90deg de gauche à droite et 180deg de haut en bas. Les formes par mot-clé, comme to right ou to bottom right, c'est-à-dire vers la droite ou vers le coin inférieur droit, sont souvent plus claires pour les cas simples et ont l'avantage de pointer exactement vers un coin, ce qu'un angle fixe ne peut pas faire lorsque la boîte change de forme.

Le curseur d'angle de cet outil écrit la valeur en degrés pour vous. Une astuce subtile : un dégradé qui s'oriente légèrement en diagonale, quelque part autour de 135deg, paraît presque toujours plus raffiné qu'un fondu strictement vertical ou horizontal, parce que l'œil interprète la diagonale comme une lumière rasant une surface.

Les dégradés radiaux et coniques

Un dégradé radial se fond vers l'extérieur depuis un point central en anneaux concentriques, ce qui est idéal pour les projecteurs, les vignettages doux et les lueurs. Par défaut, il forme une ellipse qui remplit la boîte, mais vous pouvez en faire un cercle parfait et déplacer son centre, de sorte qu'un point lumineux puisse se loger dans un coin plutôt qu'en plein milieu. Les dégradés radiaux sont le choix naturel chaque fois que la lumière ou le point de focalisation doit sembler provenir d'un point unique.

Un dégradé conique balaie les couleurs autour d'un centre comme les aiguilles d'une horloge, plutôt que vers l'extérieur depuis celui-ci. C'est ce balayage rotatif qui fait des dégradés coniques la base des camemberts, des roues chromatiques et de la lueur conique de plus en plus courante utilisée comme accent sur une carte. Les mêmes arrêts de couleur que vous connaissez déjà s'appliquent toujours ; seule la géométrie de leur disposition change entre le linéaire, le radial et le conique.

Les arrêts de couleur et leurs positions

Chaque dégradé est défini par des arrêts de couleur, où chaque arrêt est une couleur et une position facultative le long de la ligne du dégradé, généralement écrite en pourcentage de 0 à 100. Avec deux arrêts, vous obtenez un simple fondu ; en ajouter davantage permet de faire passer le dégradé par plusieurs couleurs. Si vous omettez les positions, le navigateur répartit les arrêts uniformément, mais les fixer à la main est la façon de contrôler précisément où se place chaque couleur et combien d'espace reçoit chaque transition.

Les positions n'ont pas à croître régulièrement, et c'est là que les dégradés deviennent intéressants. Resserrer deux arrêts l'un contre l'autre crée une transition rapide, tandis que les écarter en crée une lente et douce. Vous pouvez même donner la même position à deux arrêts pour supprimer entièrement le fondu, ce qui est la clé de la technique suivante.

Les arrêts nets : rayures, bandes et formes

Lorsque deux arrêts de couleur adjacents partagent la même position, la transition entre eux se produit sur une distance nulle, produisant un bord net au lieu d'un fondu. Répétez ce motif et vous obtenez des rayures, des damiers, des barres de progression et des bandes codées par couleur, le tout dessiné en CSS sans la moindre image. Par exemple, un dégradé qui maintient une couleur de 0 à 50 pour cent et une seconde couleur de 50 à 100 pour cent vous donne une séparation bicolore nette en plein milieu.

Associez les arrêts nets à repeating-linear-gradient ou à repeating-radial-gradient et le motif se répète automatiquement à travers la boîte, ce qui vous permet de créer des rayures bonbon, du ruban d'avertissement diagonal ou de fines lignes-guides à partir d'une seule déclaration courte. Comme il s'agit de calcul vectoriel plutôt que d'une image matricielle, cela reste parfaitement net à toute taille et sur toute densité de pixels.

Transparence et superposition

Les arrêts d'un dégradé peuvent utiliser des couleurs dotées d'un canal alpha, et le fondu vers une couleur totalement transparente est l'un des gestes les plus utiles que vous puissiez faire. Un dégradé qui va d'une couleur unie vers le transparent crée le voile que l'on voit derrière le texte au bas d'une photo, le fondu en bordure d'une liste défilante et les masques d'image doux. Une réserve : dans certaines interpolations de couleur, le fondu vers un transparent ordinaire peut passer par un point intermédiaire d'un gris terne, si bien que fondre vers la même couleur à alpha zéro, plutôt que vers un simple mot-clé transparent, donne un résultat plus propre.

Parce que les dégradés sont des images, la propriété background en accepte plusieurs séparés par des virgules, peints de l'avant vers l'arrière. Empiler un subtil dégradé transparent par-dessus un dégradé de base est la façon dont sont construits les riches arrière-plans modernes, sans le moindre fichier image.

Accessibilité : du texte par-dessus des dégradés

Le risque, avec les dégradés, se situe sous votre texte. Le contraste peut être parfaitement satisfaisant à une extrémité d'un dégradé et échouer gravement à l'autre, si bien qu'un titre lisible par-dessus la partie sombre peut disparaître par-dessus la partie claire. Vérifiez toujours la zone la plus défavorable, et non la moyenne. La solution robuste consiste à placer un voile uni semi-transparent, ou un dégradé dédié du sombre vers le transparent, entre l'arrière-plan chargé et le texte, afin que le rapport de contraste reste sûr partout. Considérez le point le plus clair sous un texte clair, et le point le plus sombre sous un texte sombre, comme la valeur que vous devez réellement réussir à respecter.