Générateur de dégradé CSS
Créez des dégradés CSS avec prévisualisation
Comment utiliser Générateur de dégradé CSS
Créez des dégradés CSS avec prévisualisation Outil gratuit en ligne, sans inscription, sans publicités intrusives. Utilisez maintenant.
À quoi servent les dégradés CSS ?
Les dégradés CSS créent des transitions de couleur douces directement dans le navigateur, sans charger de fichiers image. Ils sont un pilier du design web moderne — permettant des effets visuels riches avec zéro requête HTTP supplémentaire, améliorant les performances et les métriques Core Web Vitals.
- Arrière-plans de sections hero : Les arrière-plans en dégradé sur toute la largeur dans les landing pages créent un impact visuel sans images lourdes. Un dégradé linéaire de la couleur primaire à la couleur secondaire de la marque établit une identité visuelle immédiate.
- Style de boutons : Les arrière-plans en dégradé sur les boutons d'appel à l'action ajoutent de la profondeur et du poids visuel.
background: linear-gradient(135deg, #7B35F5, #C040A0)est un exemple de dégradé diagonal vibrant. - Texte en dégradé : Appliquez des dégradés au texte avec
background-clip: textet-webkit-text-fill-color: transparent— crée des titres visuellement frappants très utilisés dans les sites modernes et les landing pages SaaS. - Effets de superposition : Une superposition de dégradé semi-transparent sur une image (de transparent à noir) améliore la lisibilité du texte superposé sans bloquer complètement l'image d'arrière-plan.
- Barres de progression et visualisation de données : Les remplissages en dégradé dans les barres de progression et les éléments de graphiques rendent les données plus attrayantes visuellement et modernes.
Types de dégradés : linear-gradient(direction, couleur1, couleur2) pour les dégradés directionnels. radial-gradient(forme, couleur1, couleur2) pour les dégradés circulaires/elliptiques. conic-gradient(couleur1, couleur2) pour les dégradés rotationnels style diagramme circulaire (CSS4 — supporté par tous les navigateurs modernes).
Frequently Asked Questions
Quelle est la différence entre dégradés linéaires, radiaux et coniques ?
Les dégradés linéaires font la transition des couleurs le long d'une ligne droite (de haut en bas, de gauche à droite ou tout angle). Les dégradés radiaux rayonnent d'un point central vers l'extérieur en cercle ou ellipse. Les dégradés coniques font la transition autour d'un point central — comme la face d'une roue de couleurs ou un graphique en secteurs. Chacun crée un effet visuel fondamentalement différent.
Comment créer un dégradé qui se répète ?
Utilisez repeating-linear-gradient() ou repeating-radial-gradient(). Spécifiez le dégradé avec une longueur définie : repeating-linear-gradient(45deg, rouge 0px, rouge 10px, bleu 10px, bleu 20px) crée des rayures diagonales. Sans taille de motif définie, les dégradés répétitifs se comportent comme des dégradés réguliers.
Les dégradés peuvent-ils être animés avec CSS ?
Les dégradés eux-mêmes ne peuvent pas être directement transitionnés avec CSS transition — background-image n'est pas animable directement. Alternatives : utilisez background-position avec background-size plus grand pour créer une animation de mouvement, ou utilisez des propriétés personnalisées CSS (variables) pour les couleurs et faites la transition de ces variables. L'approche la plus courante est le fondu en opacité entre deux couches de dégradé.
Que signifie l'angle du dégradé ?
L'angle dans linear-gradient est mesuré dans le sens horaire depuis le haut. 0deg va vers le haut (de bas en haut). 90deg va vers la droite (de gauche à droite). 180deg va vers le bas (de haut en bas). 45deg va diagonalement vers le bas-droite. Vous pouvez aussi utiliser des mots-clés directionnels : to top, to bottom, to right, to bottom right, etc.
Comment créer un dégradé avec plusieurs points de couleur ?
Ajoutez plus de valeurs de couleur séparées par des virgules : linear-gradient(135deg, #ff0000 0%, #ff8800 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). Le pourcentage contrôle où apparaît chaque couleur. Sans pourcentages, les points sont distribués équitablement. Les points de couleur peuvent se chevaucher pour créer des transitions nettes plutôt que douces.
Dégradés CSS vs dégradés SVG vs dégradés image
Les dégradés CSS ne nécessitent aucun fichier externe, s'adaptent parfaitement à toute taille et sont faciles à animer — le premier choix pour les arrière-plans et les effets UI simples. Les dégradés SVG peuvent être appliqués aux formes et tracés SVG — plus flexibles pour les graphiques vectoriels complexes. Les dégradés image (PNG, JPG) sont nécessaires pour les effets très complexes que CSS ne peut pas reproduire. Pour les arrière-plans web et les éléments UI, les dégradés CSS sont toujours préférables aux images pour les performances.