Comment ça marche
Choisissez un type de dégradé, un angle et deux ou trois couleurs avec leurs positions. L’aperçu se met à jour instantanément, et vous obtenez un code CSS prêt à coller ainsi qu’une image PNG de 1920 × 1080 pour vos présentations, fonds d’écran et publications sur les réseaux sociaux.
background: linear-gradient(135deg, #2459e0 0%, #f2b33d 100%);
Types de dégradé
- Linéaire : les couleurs se fondent le long d’une ligne droite selon l’angle choisi (0° = de bas en haut, 90° = de gauche à droite).
- Radial : les couleurs se diffusent en cercle depuis le centre.
- Conique : les couleurs tournent autour du centre, comme un cercle chromatique ou un diagramme circulaire.
Conseils
- Des couleurs proches sur le cercle chromatique se fondent plus harmonieusement que des couleurs opposées.
- Pour garder un texte lisible sur un dégradé, vérifiez le contraste aux deux extrémités.
- Tous les navigateurs modernes prennent en charge ces dégradés CSS sans préfixe.
Normes et sources
- La syntaxe des dégradés suit les CSS Images Module Level 3 et 4 (W3C)
Dernière révision 7 octobre 2026
Questions fréquentes
Comment créer un dégradé CSS ?
Choisissez un type, réglez l’angle et les couleurs, puis copiez la ligne « background » générée dans votre feuille de style.
Que signifie l’angle ?
Pour un dégradé linéaire, 0° va de bas en haut, 90° de gauche à droite et 180° de haut en bas.
Puis-je utiliser plus de deux couleurs ?
Oui. Cochez « Ajouter une couleur intermédiaire » pour ajouter un troisième arrêt de couleur avec sa propre position.
Puis-je télécharger le dégradé en image ?
Oui. « Télécharger en PNG » enregistre une image de 1920 × 1080, prête pour vos présentations, fonds d’écran ou réseaux sociaux.
Ces dégradés fonctionnent-ils dans tous les navigateurs ?
Les dégradés linéaires et radiaux fonctionnent partout ; les dégradés coniques fonctionnent dans toutes les versions actuelles de Chrome, Edge, Firefox et Safari.