Un hero tout en douceur
CSS
.hero { background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}Dégradé diagonal à deux couleurs. Le grand classique des hero de SaaS indé — agréable à l'œil et compatible avec du texte par-dessus.
Générateur de dégradés CSS
Concevez des dégradés CSS visuellement avec code en direct.
Dernière mise à jour
Aperçu2 arrêts
Arrêts de couleur
- 0%
- 100%
CSS
background: linear-gradient(135deg, #b18cff 0%, #5ac8c8 100%);C'est quoi, un générateur de dégradés CSS ?
Un générateur de dégradés CSS, c'est un éditeur visuel pour les fonctions linear-gradient, radial-gradient et conic-gradient. Fini la saisie des color stops à la main : on glisse les couleurs sur une piste, l'aperçu se met à jour, et on copie un CSS prêt à coller directement dans la feuille de style.
Les dégradés sont partout dans les UI modernes : sections hero, overlays sur les cartes, états de boutons, effets de halo, subtilités du dark mode, skeletons de chargement, bordures décoratives. Savoir lire et écrire un dégradé à la main, ça fait gagner du temps — mais pour esquisser une idée, rien ne bat un éditeur visuel.
CSS gère trois types de dégradés. Le *linear* file en ligne droite selon n'importe quel angle. Le *radial* rayonne depuis un point, en cercle ou en ellipse. Le *conic* balaie les couleurs autour d'un centre, comme l'aiguille d'une horloge. Chacun a ses usages — et on peut empiler plusieurs dégradés sur un même fond.
Ce que vous allez apprendre en composant des dégradés
- Un dégradé se définit par une *direction* (ou une forme) et des *color stops* — des couleurs avec une position optionnelle.
- Deux color stops à la même position créent une *transition franche*, pratique pour des rayures ou un fond coupé en deux.
- Les espaces colorimétriques modernes comme
oklchproduisent des dégradés plus lisses et perceptuellement plus uniformes quergbouhsl.
Construire un dégradé CSS, étape par étape
Choisir le type de dégradé
Linear pour un balayage rectiligne, radial pour un fondu circulaire, conic pour une rotation autour d'un centre.
Régler l'angle ou la position
Pour le linear, choisissez un angle en degrés (
0degcorrespond à un dégradé du bas vers le haut en CSS). Pour le radial et le conic, définissez la position du centre.Ajouter et placer les color stops
Ajoutez autant de couleurs que voulu. Glissez chaque stop sur la piste pour le repositionner. Deux stops à la même position donnent une transition franche.
Prévisualiser sur une vraie forme
Basculez entre une bannière pleine largeur, une carte et un bouton pour voir comment le dégradé se comporte selon les rapports d'aspect.
Copier le CSS
Copiez la déclaration
backgroundprête à l'emploi et collez-la dans votre feuille de style.
Aide-mémoire des dégradés CSS
Les trois fonctions de dégradé et leurs ingrédients. Référence complète sur MDN : linear-gradient, radial-gradient, conic-gradient.
| Fonction | Ce qu'elle fait | Exemple |
|---|---|---|
linear-gradient | Balayage de couleurs le long d'une ligne | linear-gradient(135deg, #6c8cff, #b18cff) |
radial-gradient | Couleurs qui rayonnent depuis un point | radial-gradient(circle at 30% 20%, #fff, #000) |
conic-gradient | Couleurs qui tournent autour d'un centre | conic-gradient(from 0deg, red, yellow, red) |
repeating-linear-gradient | Motif de rayures répétées | repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) |
| Color stop | Une couleur avec une position optionnelle | #6c8cff 25% |
| Hard stop | Même position deux fois → bord net | #000 50%, #fff 50% |
| Plusieurs dégradés | Empilés sur un seul élément | background: g1, g2, g3; |
Quelques dégradés CSS à tester
Un projecteur radial
CSS
.card { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%), #1f2230;}On empile un highlight radial translucide par-dessus une couleur pleine pour simuler une source de lumière douce — idéal pour les cartes en dark mode.
Rayures à transitions franches
CSS
.stripes { background: repeating-linear-gradient( 45deg, #1a1a1a 0 12px, #2a2a2a 12px 24px );}Deux stops à la même position produisent un bord net. En l'enveloppant dans repeating-linear-gradient, le motif se répète tout seul.
Erreurs fréquentes avec les dégradés CSS
- Empiler trop de color stops — trois ou quatre suffisent en général ; au-delà, le rendu devient souvent vaseux.
- Oublier qu'en CSS,
0degva du bas vers le haut (à l'inverse de pas mal d'outils de design où 0° pointe à droite). - Poser du texte sur un dégradé très contrasté sans vérifier la lisibilité aux deux extrémités — gardez les ratios WCAG en tête.
FAQ sur les dégradés CSS
Comment créer un dégradé CSS ?
Utilisez
linear-gradient, radial-gradient ou conic-gradient comme valeur d'une propriété background ou background-image. Chaque fonction attend une direction (ou un centre) suivie d'une liste de color stops.Quelle est la différence entre linear, radial et conic ?
Le linear balaie les couleurs en ligne droite. Le radial les fait rayonner depuis un point, en cercle ou en ellipse. Le conic les fait tourner autour d'un centre, à la manière d'une aiguille d'horloge.
Peut-on animer un dégradé CSS ?
Les navigateurs n'interpolent pas proprement entre deux images de dégradé. Les astuces classiques : animer
background-position pour faire défiler un dégradé, faire une transition d'opacité entre deux couches de dégradé, ou animer des custom properties CSS utilisées comme color stops.Pourquoi mon dégradé montre-t-il des bandes ?
Le banding apparaît quand trop peu de paliers de couleurs s'étalent sur une grande surface. Ajoutez des stops intermédiaires, passez à un espace perceptuel comme
oklch, ou superposez un léger bruit de dithering.Les dégradés CSS sont-ils supportés par tous les navigateurs ?
Les dégradés linear et radial sont supportés partout. Les conic le sont par tous les navigateurs modernes. Pour des navigateurs très anciens, ajoutez un
background-color plein en fallback avant la déclaration de dégradé.