Générateur CSS Gradient gratuit
Ce générateur CSS gradient gratuit crée un dégradé linéaire ou radial à partir de deux ou trois couleurs et d'un angle, affiche un aperçu et vous donne le CSS à copier, y compris une couleur unie de secours pour les anciens navigateurs. Il convient aux designers et développeurs qui veulent un arrière-plan pour une section hero, un bouton ou une carte sans écrire la syntaxe à la main.
CSS Gradient Generator
Generators and Converters
À propos de cet outil
Un dégradé CSS est une image de fond créée par le navigateur, donc il ne coûte aucun téléchargement et reste net à n'importe quelle taille. La syntaxe est courte mais facile à oublier : linear-gradient prend un angle et une liste de couleurs, et radial-gradient étend les couleurs vers l'extérieur à partir d'un point central.
Choisissez le style, définissez l'angle pour un dégradé linéaire et sélectionnez deux couleurs. Activez la troisième couleur pour un mélange à trois arrêts ; les arrêts sont répartis uniformément. La page dessine un aperçu à partir des mêmes valeurs et imprime une règle de fond avec une couleur unie d'abord, de sorte que les navigateurs qui ne peuvent pas dessiner de dégradés affichent quand même quelque chose de sensé. Les angles suivent la règle CSS : 0 degré pointe vers le haut, 90 vers la droite, 180 vers le bas.
Attention au contraste quand du texte se trouve sur un dégradé : vérifiez les parties les plus claires et les plus sombres par rapport à la couleur de votre texte avec le sélecteur de couleur. Les dégradés avec des teintes très différentes peuvent sembler troubles au milieu, alors essayez une troisième couleur qui se situe entre elles. Rien de ce que vous choisissez n'est stocké.
Questions fréquentes
Que signifie l'angle dans un dégradé linéaire ?
C'est la direction du changement de couleur. Zéro degré pointe vers le haut, 90 degrés vers la droite, 180 degrés vers le bas et 270 degrés vers la gauche. Une diagonale comme 135 degrés va du haut gauche vers le bas droit.
Pourquoi le CSS inclut-il une couleur unie en premier ?
C'est une couleur de secours. Un navigateur qui ne peut pas dessiner de dégradés ignore la ligne de dégradé et utilise la couleur unie au-dessus, de sorte que l'arrière-plan n'est jamais vide. Tous les navigateurs actuels supportent les dégradés, donc cela ne couvre que les très anciens.
Quelle est la différence entre linéaire et radial ?
Un dégradé linéaire change de couleur le long d'une ligne droite à l'angle que vous choisissez. Un dégradé radial commence au centre et change de couleur vers l'extérieur en cercle ou ellipse, ce qui convient aux projecteurs, boutons et lueurs douces.
Puis-je utiliser plus de trois couleurs ?
Cet outil crée deux ou trois arrêts, ce qui couvre la plupart des designs. Pour plus, copiez le CSS et ajoutez des arrêts de couleur supplémentaires à la main, séparés par des virgules, optionnellement avec une position comme #ff0000 40%.