Générateur de dégradés CSS

Qu'est-ce que Générateur de dégradés CSS ?

Le Générateur de dégradés CSS est un outil en ligne gratuit destiné aux web designers et développeurs front-end qui ont besoin d'un dégradé rapide sans écrire la syntaxe à la main. Choisissez un dégradé linéaire, radial ou conique, réglez l'angle en degrés pour les types linéaire et conique, et définissez des arrêts de couleur avec chacun une couleur HEX et un pourcentage de position. Pendant l'édition, un aperçu en direct montre le résultat et la règle CSS background correspondante se met à jour instantanément, pour que vous puissiez la copier directement dans une feuille de style. Utilisez-le pour concevoir des boutons, des arrière-plans héro, des cartes et des superpositions, ou pour apprendre comment fonctionnent les fonctions linear-gradient(), radial-gradient() et conic-gradient().

Comment utiliser Générateur de dégradés CSS

1. Choisissez le type de dégradé : Linéaire, Radial ou Conique.
2. Pour un dégradé linéaire ou conique, réglez l'angle en degrés (0-360) ; le radial utilise un cercle centré et ignore l'angle.
3. Modifiez chaque arrêt de couleur : saisissez ou choisissez une couleur HEX et définissez sa position en pourcentage (0-100).
4. Cliquez sur Ajouter un arrêt pour insérer une autre couleur, ou sur l'icône corbeille pour supprimer un arrêt (un minimum de deux arrêts est conservé).
5. Observez la mise à jour de la zone d'aperçu, puis copiez la règle CSS background générée avec le bouton de copie.

Exemples

Linéaire, 90deg, #4f86f7 à 0% et #9333ea à 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Radial, arrêts #ffffff 0%, #4f86f7 50%, #1e3a8a 100%

background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);

Questions fréquentes

Quels types de dégradé sont pris en charge ?

Trois : linear-gradient (avec un angle en degrés), radial-gradient (un cercle centré) et conic-gradient (avec un angle de départ). Basculez entre eux avec le sélecteur de type et le CSS se met à jour instantanément.

Comment fonctionnent les arrêts de couleur et les positions ?

Chaque arrêt a une couleur et un pourcentage de position de 0 à 100. Les arrêts sont écrits dans le CSS dans l'ordre où ils apparaissent dans la liste, exactement comme le navigateur les interprète, vous contrôlez donc l'ordre directement. Vous pouvez ajouter des arrêts avec Ajouter un arrêt et les supprimer jusqu'à un minimum de deux.

Puis-je choisir les couleurs visuellement au lieu de saisir le HEX ?

Oui. Cliquez sur la petite pastille de couleur à côté de chaque arrêt pour ouvrir le sélecteur de couleur natif de votre navigateur, ou saisissez une valeur HEX comme #4f86f7 directement dans le champ de couleur. L'aperçu et le CSS se mettent à jour au fur et à mesure de vos modifications.

Pourquoi le champ d'angle disparaît-il pour les dégradés radiaux ?

Ici, un dégradé radial est dessiné comme un cercle centré, qui n'utilise pas d'angle, c'est pourquoi le champ d'angle n'est affiché que pour les types linéaire et conique, où il change la direction.

Mes couleurs ou mon CSS sont-ils envoyés quelque part ?

Non. Le dégradé est entièrement construit dans votre navigateur avec des calculs locaux de chaînes et de couleurs — aucune couleur, aucun CSS ni aucun réglage n'est jamais envoyé à un serveur, il fonctionne donc hors ligne et garde votre travail privé.