Générateur de dégradés CSS
Créer de beaux dégradés CSS avec aperçu
Paramètres du dégradé
Points d’arrêt de couleur
Point d’arrêt de couleur 1
Point d’arrêt de couleur 2
Dégradés prédéfinis
Conseils sur les dégradés
Utilisez des dégradés linéaires pour des transitions de couleur directionnelles fluides.
Les dégradés radiaux conviennent bien aux effets de projecteur ou de mise au point.
Les dégradés coniques sont parfaits pour les roues chromatiques et les motifs angulaires.
Ajustez les positions des points d’arrêt pour contrôler la répartition des couleurs du dégradé.
Utilisez des couleurs de teintes proches pour des dégradés subtils ou des couleurs contrastées pour des effets marqués.
Aperçu en direct
Propriété CSS raccourcie
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);Propriété CSS
background-image: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);Classe CSS
.gradient-bg {
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);
}Ajustez les couleurs et les positions. L’aperçu se met à jour au fil de vos modifications.
À propos du générateur de dégradés CSS
Notre générateur de dégradés CSS gratuit facilite la création de transitions de couleurs douces et élégantes pour tout projet web. Créez des dégradés linéaires, des dégradés radiaux et des dégradés coniques avec un contrôle total sur les couleurs, les positions, les directions et les angles, le tout avec un aperçu visuel en temps réel.
Que vous ayez besoin d'un fond discret à deux couleurs ou d'un dégradé complexe à plusieurs arrêts, cet outil offre jusqu'à 10 arrêts de couleur avec un contrôle précis de leur position. Choisissez parmi des modèles prédéfinis comme Sunset, Ocean, Forest et Purple Rain, ou utilisez le générateur aléatoire pour découvrir des combinaisons de couleurs de dégradé originales pour vos créations.
Le générateur produit instantanément un code de dégradé CSS propre, que vous pouvez copier en un clic ou télécharger sous forme d'image PNG. Plusieurs formats de sortie sont proposés, dont la notation abrégée background, la propriété background-image et une classe CSS prête à l'emploi. Tout le traitement s'exécute dans votre navigateur, sans aucun envoi vers un serveur.
Fonctionnalités principales
- Prise en charge des dégradés linéaires, radiaux et coniques avec personnalisation complète
- Jusqu'à 10 arrêts de couleur avec contrôle individuel de la position pour un dégradé précis
- 8 directions prédéfinies pour les dégradés linéaires, plus la saisie d'un angle personnalisé
- Contrôles de la forme (cercle/ellipse) et de la position des dégradés radiaux
- Dégradé conique avec angle de départ réglable pour des effets de roue chromatique
- 4 dégradés prédéfinis intégrés : Sunset, Ocean, Forest et Purple Rain
- Générateur de dégradés aléatoires pour l'inspiration créative et l'exploration
- Aperçu en temps réel qui se met à jour instantanément à chaque réglage
- Copie en un clic avec plusieurs formats de sortie CSS (notation abrégée, propriété, classe)
- Téléchargement du dégradé sous forme d'image PNG haute résolution (800x600)
Comment utiliser le générateur de dégradés CSS
- Choisissez un type de dégradé : sélectionnez Linéaire, Radial ou Conique dans le sélecteur de type pour définir le style de votre dégradé.
- Définissez la direction ou la position : pour un dégradé linéaire, choisissez une direction ou un angle personnalisé. Pour un dégradé radial, choisissez la forme et la position. Pour un dégradé conique, réglez l'angle de départ.
- Ajoutez et ajustez les couleurs : utilisez les sélecteurs de couleur pour définir les couleurs de votre dégradé et faites glisser les valeurs de position pour contrôler l'emplacement de chaque couleur.
- Prévisualisez en temps réel : regardez l'aperçu du dégradé se mettre à jour instantanément lorsque vous modifiez les couleurs, les positions et les réglages.
- Copiez le code CSS : cliquez sur le bouton Copier pour copier la syntaxe du dégradé CSS dans votre presse-papiers, dans le format de votre choix.
- Téléchargez en image : cliquez sur Télécharger pour enregistrer votre dégradé sous forme d'image PNG à utiliser dans des outils de design ou des présentations.
Cas d’usage
- Arrière-plans de sites web : créez des sections d'en-tête accrocheuses, des bandeaux et des arrière-plans pleine page avec des transitions de couleurs fluides.
- Style des boutons : concevez des boutons en dégradé qui se démarquent et guident les utilisateurs vers les appels à l'action.
- Accents de cartes et de composants : ajoutez des bordures, des superpositions ou des couleurs d'accent en dégradé aux cartes et composants d'interface.
- Effets de texte : utilisez des dégradés CSS avec background-clip pour créer des effets de texte coloré en dégradé.
- Indicateurs de chargement : créez des arrière-plans en dégradé animés pour les écrans squelettes et les états de chargement.
- Visuels pour les réseaux sociaux : téléchargez des images en dégradé pour vos publications, stories et photos de couverture sur les réseaux sociaux.
- Couleurs de design system : établissez des jetons de dégradé cohérents pour le langage graphique de votre marque.
- Diapositives de présentation : créez des arrière-plans en dégradé pour des présentations web et des portfolios.
Questions fréquentes
Cet outil est-il gratuit ?
Oui, le générateur de dégradés CSS est entièrement gratuit. Il n'y a aucune limite d'utilisation, aucun filigrane sur les téléchargements et aucune création de compte requise.
Mes données sont-elles en sécurité ?
Toute la génération des dégradés et le rendu des images s'effectuent directement dans votre navigateur. Aucune donnée de couleur, aucun code CSS ni aucune image n'est envoyé à un serveur, ce qui garantit que votre travail reste totalement privé.
Quelle est la différence entre les dégradés linéaires, radiaux et coniques ?
Les dégradés linéaires font évoluer les couleurs le long d'une ligne droite dans une direction donnée. Les dégradés radiaux partent d'un point central vers l'extérieur, en forme de cercle ou d'ellipse. Les dégradés coniques balaient les couleurs autour d'un point central, comme une roue chromatique.
Combien de couleurs puis-je utiliser dans un dégradé ?
Vous pouvez utiliser entre 2 et 10 arrêts de couleur dans un même dégradé. Chaque arrêt dispose de son propre sélecteur de couleur et de son curseur de position pour un contrôle précis de la transition.
Les dégradés CSS sont-ils pris en charge par tous les navigateurs ?
Les dégradés linéaires et radiaux sont pris en charge par tous les navigateurs modernes. Les dégradés coniques sont eux aussi largement pris en charge dans les versions actuelles de Chrome, Firefox, Safari et Edge.
Astuces et bonnes pratiques
- Utilisez des teintes proches pour les effets discrets : des couleurs voisines sur le cercle chromatique donnent des dégradés doux, élégants et naturels.
- Limitez les arrêts de couleur : deux à trois couleurs donnent généralement les résultats les plus nets. Avec davantage d'arrêts, les transitions peuvent devenir ternes si elles ne sont pas positionnées avec soin.
- Définissez une couleur de secours : ajoutez toujours une background-color unie avant la déclaration de votre dégradé, pour les navigateurs qui pourraient ne pas l'afficher.
- Essayez le radial pour les effets de projecteur : les dégradés radiaux conviennent bien pour attirer l'attention sur le centre d'une section ou mettre en valeur une zone précise.
- Testez sur plusieurs écrans : les dégradés peuvent varier d'un moniteur à un écran mobile, alors prévisualisez toujours sur plusieurs appareils.
- Utilisez le générateur aléatoire : cliquez sur Aléatoire pour découvrir des combinaisons de couleurs inattendues auxquelles vous n'auriez pas pensé.