Générateur de dégradé CSS
Créez un dégradé linéaire, radial ou conique, regardez-le se mettre à jour en direct et copiez la règle CSS background.
Fonctionne entièrement dans votre navigateur
Points de couleur
Préréglages
Les couleurs des points peuvent être n'importe quelle couleur comprise par votre navigateur (HEX, noms, rgb(), hsl(), oklch()). Jusqu'à 10 points. Les positions sont en pourcentages ; le résultat est du CSS simple, sans préfixes propriétaires.
Comment créer un dégradé CSS
- Choisissez Linéaire, Radial ou Conique, ou partez d'un préréglage.
- Réglez l'angle ou la position, puis modifiez les points de couleur : changez chaque couleur et sa position, ajoutez des points et déplacez-les vers le haut ou le bas.
- Cliquez sur Copier le CSS et collez la règle dans votre feuille de style. Cochez l'option de repli si vous voulez une ligne de couleur unie avant elle.
Comprendre un dégradé CSS
Un dégradé CSS est une image que le navigateur dessine lui-même : il s'adapte donc à n'importe quelle taille et ne coûte aucun téléchargement. Un dégradé linéaire fond les couleurs le long d'une ligne définie par un angle. Un dégradé radial les fond vers l'extérieur à partir d'un point central, en cercle ou en ellipse. Un dégradé conique fait tourner les couleurs autour d'un centre comme l'aiguille d'une horloge, ce qui en fait le choix naturel pour les diagrammes circulaires et les roues chromatiques.
Chaque point de couleur est une couleur accompagnée d'une position le long de la ligne du dégradé, exprimée en pourcentage. Entre deux points, le navigateur crée une transition douce. Si deux points partagent la même position, la transition n'a pas de largeur et vous obtenez une limite nette. Si un point est placé avant le précédent, les navigateurs le considèrent comme situé à la position du point précédent, c'est pourquoi cet outil vous permet de réordonner et de trier les points.
La règle est écrite sous la forme background: pour fonctionner sur n'importe quel élément. Les dégradés sont dessinés en arrière-plan : un texte posé dessus demande donc la même attention au contraste qu'un texte sur une couleur unie. Vérifiez séparément les parties les plus claires et les plus foncées du dégradé.
Astuces
- Choisissez des couleurs de points qui vont bien ensemble avec le Générateur de palette de couleurs.
- Convertissez la couleur d'un point entre HEX, RGB et HSL avec le Convertisseur de couleurs et contraste.
- Vous publiez la feuille de style ? Réduisez sa taille avec Minifier et indenter du CSS.
Questions fréquentes
Que signifie l'angle d'un dégradé linéaire ?
0deg pointe vers le haut : le dégradé va donc du bord inférieur vers le haut. 90deg va de gauche à droite, 180deg de haut en bas et 270deg de droite à gauche. 360deg correspond à la même direction que 0deg. L'outil écrit le nombre saisi avec l'unité deg.
Comment obtenir une limite nette au lieu d'une transition douce ?
Donnez la même position à deux points voisins. Par exemple, du rouge à 50 % suivi de bleu à 50 % change de couleur à mi-parcours sans transition. Le préréglage Rayures nettes en est un exemple.
À quoi sert l'option de répétition ?
Elle écrit repeating-linear-gradient, repeating-radial-gradient ou repeating-conic-gradient. Le motif compris entre le premier et le dernier point est répété en mosaïque : il n'est donc visible que si le dernier point est avant 100 %. Essayez des points à 0 %, 10 % et 20 % pour obtenir des rayures.
À quoi sert la ligne de couleur unie de repli ?
Un navigateur qui ne sait pas lire le dégradé ignore cette ligne et garde la précédente. Les navigateurs qui gèrent les dégradés, soit presque tous ceux en usage, la remplacent. La couleur de repli est celle de votre premier point.
Quels formats de couleur sont acceptés ?
Tout ce que la propriété CSS color accepte dans votre navigateur : #1636a3, tomato, rgb(22 54 163), hsl(226 76% 36%) ou oklch(0.5 0.2 260). Saisir autre chose affiche un message et laisse à l'écran le dernier dégradé valide.
Un dégradé conique a-t-il besoin d'une position ?
Il a toujours un centre, que cet outil écrit en pourcentages : 50 % 50 % est le milieu de la boîte. L'angle de départ fait pivoter le point où commence le balayage des couleurs, mesuré dans le sens des aiguilles d'une montre depuis le haut.