Générateur de dégradés CSS
Créez de superbes dégradés CSS linéaires, radiaux et coniques avec un aperçu en direct et copiez le code en un clic
Aperçu en direct
Type de dégradé
Points de couleur
Préréglages
Code CSS
background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);Tout est généré localement dans votre navigateur. Rien n'est envoyé à un serveur.
À propos de cet outil
Ce générateur de dégradés CSS vous permet de concevoir visuellement des fondus de couleurs fluides et de copier un CSS prêt à coller en un clic. Choisissez un dégradé linéaire, radial ou conique, ajoutez autant de points de couleur que vous le souhaitez et affinez la couleur de chaque point avec un sélecteur de couleur natif ou un champ HEX, ainsi qu'une position de 0 à 100 pour cent. Pour les dégradés linéaires, vous pouvez définir n'importe quel angle de 0 à 360 degrés ou utiliser les boutons de direction rapides ; les dégradés radiaux prennent en charge les formes cercle ou ellipse, et les dégradés coniques font tourner les couleurs autour d'un point central. Un grand aperçu en direct se met à jour instantanément pour que vous voyiez exactement ce que vous créez. Partez d'un des préréglages soignés, appuyez sur le bouton aléatoire pour de nouvelles idées, puis copiez la propriété background générée dans votre feuille de style. Tout fonctionne localement dans votre navigateur : c'est rapide, privé et utilisable hors ligne.
Comment l'utiliser
- 1 Choisissez un type de dégradé : linéaire, radial ou conique.
- 2 Ajoutez des points de couleur, puis définissez la couleur de chaque point (sélecteur ou HEX) et sa position de 0 à 100%.
- 3 Réglez l'angle pour les dégradés linéaires et coniques, ou la forme pour les radiaux, ou chargez un préréglage.
- 4 Regardez l'aperçu en direct, puis cliquez sur Copier le CSS pour coller la propriété background dans votre projet.
Comment ça marche
L'outil compose une fonction de dégradé CSS standard à partir de vos réglages. Les dégradés linéaires utilisent linear-gradient(angle, points), où l'angle oriente la ligne du dégradé et chaque point de couleur s'écrit comme une couleur suivie d'une position en pourcentage. Les dégradés radiaux utilisent radial-gradient(forme at center, points) pour diffuser les couleurs du centre vers l'extérieur, et les dégradés coniques utilisent conic-gradient(from angle at center, points) pour faire tourner les couleurs autour d'un point. Les points de couleur sont automatiquement triés par position avant la sortie, donc l'ordre d'ajout n'a pas d'importance. Les positions sont limitées à 0-100% et au moins deux points sont toujours conservés, de sorte que le CSS généré est toujours valide. Le résultat est une simple déclaration background que vous pouvez utiliser dans tout navigateur moderne sans préfixes.
Questions fréquentes
Quelle est la différence entre les dégradés linéaires, radiaux et coniques ?
Un dégradé linéaire mélange les couleurs le long d'une ligne droite dont vous définissez la direction par un angle. Un dégradé radial diffuse les couleurs depuis un point central vers l'extérieur, en cercle ou en ellipse. Un dégradé conique fait tourner les couleurs autour d'un point central, pratique pour les camemberts, les roues chromatiques et les effets angulaires. Les trois sont du CSS natif pris en charge par tous les navigateurs modernes.
Combien de points de couleur puis-je ajouter ?
Vous pouvez ajouter autant de points de couleur que nécessaire ; l'outil en conserve toujours au moins deux pour que le dégradé reste valide. Chaque point a sa propre couleur et une position de 0 à 100 pour cent. Ajouter plus de points permet de créer des arcs-en-ciel, des fonds multicolores et des transitions fluides à plusieurs couleurs.
À quoi sert le réglage d'angle ?
Pour un dégradé linéaire, l'angle définit la direction de la ligne de couleur : 0 degré pointe vers le haut, 90 vers la droite, 180 vers le bas et 270 vers la gauche, pour orienter le fondu dans n'importe quel sens. Pour un dégradé conique, l'angle définit la rotation de départ du balayage. Vous pouvez faire glisser le curseur, saisir une valeur précise ou utiliser les boutons de direction rapides.
Le CSS généré est-il prêt pour la production ?
Oui. La sortie est une propriété background standard utilisant des fonctions de dégradé natives qui fonctionnent dans tous les navigateurs actuels sans préfixes de fournisseur. Copiez simplement la ligne et collez-la dans votre feuille de style, votre style en ligne ou votre composant. Vous pouvez changer le nom de la propriété en background-image si vous préférez conserver une couleur de fond distincte.
Mes données sont-elles envoyées quelque part ?
Non. Tout le générateur s'exécute dans votre navigateur avec JavaScript et CSS. Rien concernant vos couleurs ou vos dégradés n'est téléversé ou stocké sur un serveur, donc l'outil est privé et continue de fonctionner même si vous vous déconnectez d'internet.
Outils et usages connexes
Associez le générateur de dégradés au convertisseur de couleurs pour choisir des valeurs HEX, RGB et HSL exactes, et au vérificateur de contraste pour vous assurer que le texte reste lisible sur votre dégradé. Designers et développeurs l'utilisent pour créer des arrière-plans héros, des boutons, des cartes, des badges et des effets décoratifs pour sites web et applications.