Générateur de Dégradés CSS
Construisez un dégradé linéaire, radial ou conique et obtenez la ligne de CSS, avec le contraste entre les deux extrémités.
Résultats
Ce que fait cet outil
Le CSS d'un dégradé est court et facile à rater de peu : l'angle tourne à l'inverse de ce qu'on attend, les arrêts sont des pourcentages et l'ordre compte. Réglez les couleurs et leur position, et cette page écrit la ligne pour vous. Elle indique aussi le contraste entre les deux extrémités, car un dégradé sert généralement de fond et le texte doit survivre sur toute sa largeur.
Formule
écrit la ligne CSS avec les arrêts de couleur dans l'ordre et aux pourcentages donnés
Variables
| Symbole | Signification | Unité |
|---|---|---|
kind | Type de dégradé | — |
angle | Angle | ° |
color_1 | Première couleur | — |
stop_1 | Où la première finit | % |
color_2 | Dernière couleur | — |
stop_2 | Où la dernière commence | % |
color_3 | Une couleur au milieu, si vous voulez | — |
stop_3 | Où se place celle du milieu | % |
OUT | Le CSS | — |
VA | Seulement la valeur | — |
ST | Arrêts de couleur | — |
CO | Contraste entre les deux extrémités | :1 |
Exemple résolu
- Type de dégradélinear
- Angle135 °
- Première couleur#c9502f
- Où la première finit0 %
- Dernière couleur#17191f
- Où la dernière commence100 %
- Une couleur au milieu, si vous voulez
- Où se place celle du milieu50 %
- Le CSSbackground: linear-gradient(135deg, #c9502f 0%, #17191f 100%);
- Seulement la valeurlinear-gradient(135deg, #c9502f 0%, #17191f 100%)
- Arrêts de couleur2
- Contraste entre les deux extrémités3,91 :1
Questions fréquentes
Vers où pointe l'angle ?
Zéro degré pointe vers le haut, et l'angle tourne dans le sens des aiguilles d'une montre à partir de là : 90 va de gauche à droite, 180 de haut en bas, 270 de droite à gauche. Cela surprend beaucoup de monde car ce n'est pas ainsi que fonctionnent les angles ailleurs, où le zéro pointe à droite et la rotation va dans l'autre sens. Le comité CSS l'a choisi pour que « 180deg » se lise « vers le bas », ce qui est le cas une fois qu'on le sait.
À quoi sert la ligne de contraste ?
Parce qu'un dégradé sert très souvent de fond à du texte, et qu'un texte lisible d'un côté peut disparaître de l'autre. Le chiffre est le contraste entre les deux couleurs d'extrémité : quand il est élevé, aucune couleur de texte ne fonctionne sur toute la largeur et il faut soit un dégradé plus resserré, soit un panneau derrière les mots.