Générateur de Dégradés CSS : Linéaire & Radial

Qu'est-ce que le Générateur de Dégradés ?

Le Générateur de Dégradés est un éditeur visuel basé sur navigateur pour créer des dégradés CSS — linéaire, radial et conique — avec plusieurs arrêts de couleur et des paramètres ajustables. Il génère un CSS prêt pour la production que vous pouvez copier dans n'importe quelle feuille de styles. L'outil affiche un aperçu en temps réel du dégradé à chaque modification, éliminant le cycle d'essai-erreur entre l'éditeur et les outils de développement du navigateur. Les designers l'utilisent pour prototyper des arrière-plans dégradés et générer un CSS précis ; les développeurs l'utilisent pour exporter des fichiers SVG avec dégradés pour des ressources évolutives.

Fonctionnalités principales

• Dégradés linéaires, radiaux et coniques — Trois types distincts sélectionnables d'un seul clic. Chaque type génère la fonction CSS correcte : linear-gradient(), radial-gradient() ou conic-gradient().
• Plusieurs arrêts de couleur avec positions — Ajoutez autant d'arrêts que nécessaire. Chaque arrêt dispose d'un sélecteur de couleur, d'une entrée hexadécimale et d'un curseur de position de 0 % à 100 %. Le minimum est de deux arrêts ; l'outil affiche un message d'erreur si vous tentez de supprimer les deux derniers.
• Angle de dégradé ajustable — Un curseur contrôle l'angle de 0° à 360° pour les types linéaire et conique. L'angle est incorporé directement dans la sortie CSS.
• Génération CSS en temps réel — La carte de sortie CSS se met à jour immédiatement à chaque modification. Le format de sortie est background: linear-gradient(90deg, #8E2DE2 0%, #4A00E0 100%); — prêt à coller.
• Aperçu instantané du dégradé — Un panneau d'aperçu de 256px de hauteur en haut de l'outil affiche le dégradé en utilisant la valeur CSS active comme style en ligne.
• Copier le CSS en un clic — Le bouton Copier CSS copie la déclaration background: ...; complète dans le presse-papiers et enregistre l'entrée dans votre historique.
• Support des dégradés répétitifs — Non affiché actuellement comme contrôle séparé, mais la sortie CSS peut être modifiée manuellement pour remplacer linear-gradient par repeating-linear-gradient si nécessaire.
• Sortie CSS compatible avec les navigateurs — Le CSS généré utilise la syntaxe standard sans préfixes compatible avec tous les navigateurs modernes.

Comment utiliser le Générateur de Dégradés

Étape 1 : Choisir un type de dégradé

Naviguez vers le Bientôt disponible: Générateur de Dégradés. L'outil s'ouvre avec un dégradé linéaire par défaut de #8E2DE2 (violet) à 0 % à #33FFDD (turquoise vif) à 100 %, rendu à 90 degrés.

Dans la carte Type de dégradé, cliquez sur l'un des trois boutons : Linéaire, Radial ou Conique. L'aperçu se met à jour immédiatement. Pour les types linéaire et conique, un curseur d'angle apparaît sous le sélecteur de type.

Étape 2 : Définir l'angle (linéaire et conique uniquement)

Faites glisser le curseur Angle entre 0 et 360 degrés. La valeur actuelle de l'angle s'affiche comme étiquette (p. ex., Angle : 135°). 0° s'écoule de haut en bas, 90° de gauche à droite, 180° de bas en haut et 270° de droite à gauche. L'aperçu se met à jour à chaque mouvement du curseur.

Pour les dégradés radiaux, le contrôle d'angle est masqué car radial-gradient(circle, ...) n'utilise pas de paramètre d'angle.

Étape 3 : Configurer les arrêts de couleur

La carte Arrêts de couleur liste chaque arrêt sous forme de ligne contenant :

• Une entrée de couleur native (carré coloré) — cliquez pour ouvrir le sélecteur de couleur du navigateur
• Une entrée de texte hexadécimal affichant la valeur de couleur actuelle
• Un curseur de position de 0 à 100 %
• Une étiquette de pourcentage de position (p. ex., 45 %)
• Un bouton de suppression (icône de corbeille)

L'entrée de couleur et l'entrée hexadécimale mettent toutes deux à jour le même arrêt. Modifier l'une ou l'autre actualise immédiatement l'aperçu.

Cliquez sur Ajouter un arrêt pour insérer un nouvel arrêt de couleur à une position aléatoire avec la couleur blanche par défaut. Modifiez la couleur et la position pour le placer où vous en avez besoin.

Étape 4 : Supprimer un arrêt de couleur

Cliquez sur l'icône de corbeille sur n'importe quelle ligne d'arrêt pour le supprimer. Si seulement deux arrêts restent, cliquer sur Supprimer affiche le message d'erreur « Minimum 2 arrêts de couleur requis » en notification et conserve les deux arrêts intacts.

Étape 5 : Copier la sortie CSS

La carte Sortie CSS affiche la déclaration complète :

background: linear-gradient(90deg, #8e2de2 0%, #33ffdd 100%);

Cliquez sur Copier CSS pour copier cette chaîne dans le presse-papiers. Une notification de succès confirme la copie. L'entrée est également enregistrée dans le panneau d'historique (pour les comptes supporters) avec le type de dégradé, l'angle et la valeur CSS.

Étape 6 : Exporter en SVG (fonctionnalité supporter)

Cliquez sur le bouton SVG (avec icône de téléchargement) pour exporter le dégradé en tant que fichier SVG. Pour les dégradés linéaires, le SVG utilise un élément <linearGradient> avec un attribut gradientTransform="rotate(angle, 0.5, 0.5)". Pour les dégradés radiaux, il utilise <radialGradient>. Le fichier est téléchargé sous le nom gradient.svg. Il s'agit d'une fonctionnalité premium pour les supporters.

Étape 7 : Aléatoire ou réinitialisation

Cliquez sur Aléatoire (icône de flèche circulaire) pour générer un nouveau dégradé avec deux couleurs aléatoires et un angle aléatoire. Cliquez sur Effacer pour réinitialiser le dégradé au dégradé linéaire violet-turquoise par défaut à 90°.

Exemples pratiques

Arrière-plan dégradé pour section hero

Vous voulez un dégradé diagonal à 135° de #667EEA (bleu-violet moyen) à #764BA2 (violet foncé) pour le hero d'une page d'atterrissage. Définissez le type sur Linéaire, faites glisser le curseur d'angle à 135, changez l'arrêt 1 à #667EEA à 0 % et l'arrêt 2 à #764BA2 à 100 %. Cliquez sur Copier CSS et collez :

.hero {
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
}

Effet de projecteur radial

Vous voulez un dégradé radial qui semble éclairer le centre d'une carte. Définissez le type sur Radial. Changez l'arrêt 1 à #FFFFFF à 0 %, ajoutez un troisième arrêt à 50 % avec #F1F5F9 et définissez l'arrêt 2 (maintenant arrêt 3) à #CBD5E1 à 100 %. La sortie :

background: radial-gradient(circle, #FFFFFF 0%, #F1F5F9 50%, #CBD5E1 100%);

Utilisez-le comme effet de profondeur subtil sur des surfaces de cartes blanches.

Aperçu de roue chromatique conique

Définissez le type sur Conique et l'angle à 0°. Ajoutez six arrêts uniformément espacés : rouge (#FF0000) à 0 %, jaune (#FFFF00) à 17 %, vert (#00FF00) à 33 %, cyan (#00FFFF) à 50 %, bleu (#0000FF) à 67 % et magenta (#FF00FF) à 83 %. Le dernier arrêt revient naturellement au rouge. Exportez en SVG pour utiliser la roue dans un diagramme de théorie des couleurs.

Conseils et bonnes pratiques

Les arrêts de couleur sont triés par position avant de générer le CSS. Vous pouvez ajouter des arrêts dans n'importe quel ordre — l'outil les trie toujours par ordre croissant avant d'écrire la sortie. Cela signifie que faire glisser un arrêt à 0 % au-delà d'un arrêt à 50 % dans le curseur réordonnera correctement le CSS.

Utilisez le bouton Aléatoire pour des points de départ créatifs. Le générateur aléatoire génère deux couleurs hexadécimales aléatoires et un angle aléatoire. Cliquez à plusieurs reprises jusqu'à trouver une palette intéressante à affiner, puis ajustez les couleurs manuellement.

Collez un dégradé existant pour le décomposer. L'outil ne prend pas encore en charge le collage direct d'une chaîne de dégradé CSS. Cependant, vous pouvez extraire les valeurs des arrêts d'un dégradé existant et les saisir manuellement.

Les URL partageables encodent tous les paramètres du dégradé. Le type de dégradé, l'angle et les arrêts de couleur (sous forme de chaîne compacte couleur:position) sont sérialisés dans l'URL de la page. Copiez l'URL pour partager votre configuration exacte de dégradé avec un collègue.

L'export SVG utilise un canevas de 400×200px. Le gradient.svg exporté a width="400" height="200" et un élément <rect> qui remplit tout le canevas avec le dégradé. Redimensionnez-le librement car le SVG est indépendant de la résolution.

Le minimum de deux arrêts est appliqué avec un message de notification. Si vous essayez de supprimer un arrêt quand il n'en reste que deux, le message d'erreur indique « Minimum 2 arrêts de couleur requis » — le dégradé a besoin d'au moins deux arrêts pour être un CSS valide.

Problèmes courants et dépannage

La sortie CSS affiche background: ; (dégradé vide). Cela ne devrait pas se produire lors d'une utilisation normale. Si le tableau des arrêts de couleur est vide (possible uniquement par corruption de l'état de l'URL), la fonction generateCss renvoie une chaîne vide. Réinitialisez l'outil avec le bouton Réinitialiser ou rechargez la page pour restaurer l'état par défaut.

L'entrée hexadécimale de l'arrêt de couleur affiche la mauvaise couleur après saisie. L'entrée hexadécimale est directement liée à la valeur de couleur de l'arrêt. Si vous saisissez un hexadécimal invalide (p. ex., #ZZZZZZ), l'entrée du sélecteur de couleur ne se mettra pas à jour et peut afficher la couleur valide précédente. Corrigez l'hexadécimal avec une valeur valide à 6 chiffres.

Le curseur de position est difficile à positionner précisément. Le curseur accepte des valeurs par incréments de 1 %. Pour un positionnement précis, saisissez le pourcentage directement — cependant, l'interface actuelle utilise uniquement un curseur. Utilisez des nombres ronds proches et vérifiez dans la sortie CSS.

Le dégradé radial semble décentré. Le dégradé radial généré utilise radial-gradient(circle, ...) qui est centré à 50 % 50 % par défaut. L'ajout de circle at X% Y% n'est pas encore disponible dans l'interface. Modifiez manuellement le CSS copié dans votre feuille de styles pour repositionner le centre.

L'export SVG n'affiche que linéaire ou radial. La fonction d'export SVG gère le dégradé linéaire comme <linearGradient> et tous les autres types (y compris conique) comme <radialGradient>. Les dégradés coniques n'ont pas d'équivalent SVG, ils se replient donc sur radial dans l'export SVG.

La restauration de l'historique ne restaure que partiellement l'état. La fonction de restauration de l'historique analyse le type de dégradé et l'angle depuis le texte de l'entrée d'historique stockée. Elle ne restaure pas les arrêts de couleur depuis l'historique (les arrêts sont préservés dans l'état de l'URL partageable). Utilisez l'URL de partage pour une restauration complète de l'état.

Confidentialité et sécurité

Le Générateur de Dégradés fonctionne entièrement dans votre navigateur. La génération CSS, la gestion des arrêts de couleur et la logique d'export SVG sont du pur JavaScript. Aucune configuration de dégradé, valeur de couleur ou donnée d'utilisation n'est envoyée à un serveur externe. L'export SVG utilise downloadText pour écrire un fichier local — aucun téléchargement vers un serveur ne se produit. L'outil fonctionne entièrement hors ligne après le chargement de la page et est sécurisé pour une utilisation avec des ressources de design propriétaires ou non publiées.

Questions fréquemment posées

Le Générateur de Dégradés est-il gratuit ?

Oui. Toutes les fonctionnalités principales — création de dégradés linéaires, radiaux et coniques, plusieurs arrêts de couleur, contrôle d'angle, copie CSS et aléatoire — sont gratuites sans compte requis. Le bouton d'export SVG est une fonctionnalité premium pour les supporters nécessitant un abonnement de supporter Ko-fi.

Le Générateur de Dégradés fonctionne-t-il hors ligne ?

Oui. Une fois la page chargée, toute la génération de dégradés, le rendu de l'aperçu et la sortie CSS fonctionnent sans accès internet. Les seules fonctionnalités dépendant d'internet sont le chargement initial de la page et l'URL partageable, qui encode l'état dans l'URL elle-même (aucun appel serveur nécessaire pour lire l'état).

Mes données sont-elles sécurisées avec le Générateur de Dégradés ?

Oui. Aucun paramètre de dégradé ni valeur de couleur n'est transmis à un serveur. L'outil n'a pas de backend pour la génération de dégradés. Vos designs restent entièrement sur votre appareil. L'URL partageable encode l'état dans la chaîne URL elle-même — aucun serveur ne la stocke.

Quels types de dégradés CSS l'outil prend-il en charge ?

L'outil prend en charge trois types de dégradés CSS : linear-gradient(), radial-gradient() et conic-gradient(). La sortie CSS utilise la syntaxe standard sans préfixes. Pour la compatibilité des navigateurs, linear-gradient et radial-gradient fonctionnent dans tous les navigateurs modernes ; conic-gradient nécessite Chrome 69+, Safari 12.1+ et Firefox 83+.

Comment créer un dégradé multi-arrêts ?

Cliquez sur Ajouter un arrêt pour insérer des arrêts de couleur supplémentaires. Chaque nouvel arrêt apparaît à une position aléatoire avec le blanc comme couleur par défaut. Cliquez sur le carré de couleur ou saisissez une valeur hexadécimale pour définir la couleur, puis faites glisser le curseur de position pour le placer. Il n'y a pas de limite supérieure sur le nombre d'arrêts.

Puis-je supprimer un arrêt de couleur ?

Oui. Cliquez sur l'icône de corbeille sur n'importe quelle ligne d'arrêt. Si seulement deux arrêts restent, l'outil empêche la suppression et affiche une notification : « Minimum 2 arrêts de couleur requis. » Un dégradé CSS valide nécessite au moins deux arrêts de couleur.

Que contient le fichier SVG exporté ?

L'export SVG crée un fichier de 400×200px avec un bloc <defs> contenant un <linearGradient> (pour type linéaire) ou <radialGradient> (pour types radial et conique), et un élément <rect> qui remplit tout le canevas avec ce dégradé. Le fichier se nomme gradient.svg et se télécharge automatiquement.

Puis-je utiliser le CSS généré dans Tailwind CSS ?

Oui. Collez la valeur linear-gradient(...) (sans le préfixe background:) dans votre configuration Tailwind comme image d'arrière-plan personnalisée :

backgroundImage: {
  'brand-gradient': 'linear-gradient(135deg, #667EEA 0%, #764BA2 100%)',
}

Puis utilisez-le comme bg-brand-gradient dans votre HTML.

L'outil prend-il en charge les arrêts de couleur transparents ?

Les entrées de couleur n'acceptent que des valeurs hexadécimales opaques (6 chiffres). Pour créer un dégradé avec transparence, copiez la sortie CSS et modifiez manuellement les couleurs des arrêts pour utiliser la notation rgba() dans votre feuille de styles, par exemple : linear-gradient(90deg, rgba(142, 45, 226, 0) 0%, #4A00E0 100%).

Comment partager un dégradé avec quelqu'un ?

Copiez l'URL depuis la barre d'adresse de votre navigateur après avoir configuré votre dégradé. L'URL encode le type de dégradé, l'angle et toutes les valeurs des arrêts de couleur. Ouvrir cette URL sur un autre appareil charge exactement le même dégradé. Vous pouvez également utiliser les boutons de partage en bas de la page pour publier sur Twitter, LinkedIn, Reddit ou copier le lien directement.

Outils connexes

• Bientôt disponible: UI Gradients — Parcourez une bibliothèque sélectionnée de dégradés nommés et copiez leurs valeurs CSS directement.
• Color Picker — Utilisez l'EyeDropper ou les entrées de format pour trouver des couleurs hexadécimales exactes avant de les ajouter comme arrêts de dégradé.
• Bientôt disponible: Color Blender — Générez des couleurs intermédiaires douces entre deux valeurs, utile pour planifier manuellement des dégradés à plusieurs arrêts.
• Bientôt disponible: Palette Generator — Générez des palettes de couleurs harmonieuses à utiliser comme sources d'arrêts de dégradé.

Essayez le Générateur de Dégradés maintenant : Bientôt disponible: Glyph Widgets Générateur de Dégradés