Générateur de Dégradé CSS
Créez un dégradé CSS à deux couleurs et copiez le code instantanément.
Cet outil fonctionne entièrement dans votre navigateur. Vos fichiers ne sont jamais envoyés à un serveur.
background: linear-gradient(90deg, #3b82f6, #a855f7);
Ce que fait cet outil
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.
Mode d'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.
Exemple expliqué
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.
Comment fonctionnent les angles de dégradé
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.
Limites
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.
Portée, sources et confidentialité
La fonction CSS linear-gradient() fait partie de la spécification CSS Images et est prise en charge par tous les navigateurs modernes. Le dégradé est calculé et rendu entièrement dans votre navigateur ; les couleurs choisies ne sont jamais envoyées.
Questions Fréquentes
- Quels types de dégradé cet outil prend-il en charge ?
- Actuellement des dégradés linéaires avec un angle réglable — le type le plus courant pour les arrière-plans, boutons et sections hero.
- Puis-je utiliser plus de deux couleurs ?
- Cet outil prend en charge deux couleurs pour un dégradé simple et propre — vous pouvez étendre manuellement le CSS généré avec d'autres points de couleur si besoin.
- Cela fonctionne-t-il dans tous les navigateurs ?
- Oui, la fonction CSS linear-gradient() est prise en charge par tous les navigateurs modernes.