Générateur de Dégradé CSS

Construit un arrière-plan CSS linear-gradient() à partir de deux couleurs et d'un angle que vous choisissez, avec un aperçu en direct et le code CSS prêt à l'emploi.

Choisissez la Couleur A et la Couleur B avec les sélecteurs de couleur et réglez l'angle en degrés. L'aperçu du dégradé et le code CSS en dessous se mettent à jour immédiatement à chaque modification ; cliquez sur l'icône de copie pour copier le CSS.

Avec les valeurs par défaut #3b82f6 (bleu), #a855f7 (violet) et un angle de 90°, l'outil génère background: linear-gradient(90deg, #3b82f6, #a855f7); — un dégradé allant de gauche à droite, car 90deg oriente la ligne du dégradé vers la droite dans le système d'angles CSS.

En CSS, 0deg oriente le dégradé de bas en haut, et l'angle augmente dans le sens horaire, donc 90deg va de gauche à droite, 180deg de haut en bas et 270deg de droite à gauche. Cela diffère d'une boussole ou d'une convention mathématique d'angle standard, ce qui prête souvent à confusion lors de l'écriture manuelle de dégradés.

Cet outil ne génère qu'un simple dégradé linéaire à deux couleurs — il ne prend pas en charge les dégradés radiaux ou coniques, plus de deux points de couleur, ni les positions d'arrêt personnalisées, comme placer une couleur à 20 % plutôt que de répartir également. Pour des dégradés allant au-delà, copiez le CSS généré comme point de départ et modifiez la fonction linear-gradient() à la main pour ajouter d'autres arrêts.

La fonction CSS linear-gradient() fait partie de la spécification CSS Images et est prise en charge par tous les navigateurs modernes, donc le code copié fonctionne sans préfixe.

Le dégradé est calculé et rendu entièrement dans votre navigateur ; les couleurs choisies ne sont jamais envoyées.