Les dégradés CSS sont l'un des outils visuels les plus puissants. Ils créent des transitions fluides entre les couleurs sans images. Ce guide complet des dégradés CSS couvre tout, des basiques aux techniques avancées.
Créez des dégradés visuellement avec notre Générateur de dégradés CSS →
Dégradés linéaires
Les dégradés linéaires transitionnent les couleurs le long d'une ligne droite.
Basic Syntax
/* Default: top to bottom */
background: linear-gradient(#3b82f6, #8b5cf6);
/* With direction */
background: linear-gradient(to right, #3b82f6, #8b5cf6);
/* With angle */
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
/* Multiple color stops */
background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6);
/* Color stops with positions */
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);Direction Keywords
background: linear-gradient(to top, ...); /* 0deg */
background: linear-gradient(to right, ...); /* 90deg */
background: linear-gradient(to bottom, ...); /* 180deg - default */
background: linear-gradient(to left, ...); /* 270deg */
background: linear-gradient(to top right, ...); /* diagonal */
background: linear-gradient(to bottom left, ...); /* diagonal */Hard Color Stops (Sharp Transitions)
/* Sharp 50/50 split */
background: linear-gradient(90deg, #3b82f6 50%, #ef4444 50%);
/* Three equal sections */
background: linear-gradient(90deg,
#3b82f6 33.3%, #22c55e 33.3%,
#22c55e 66.6%, #ef4444 66.6%
);Dégradés radiaux
Les dégradés radiaux rayonnent depuis un point central.
/* Default: ellipse at center */
background: radial-gradient(#3b82f6, #1e1b4b);
/* Circle shape */
background: radial-gradient(circle, #3b82f6, #1e1b4b);
/* Positioned center */
background: radial-gradient(circle at top left, #3b82f6, #1e1b4b);
background: radial-gradient(circle at 25% 75%, #3b82f6, #1e1b4b);
/* Sized circle */
background: radial-gradient(circle 200px at center, #3b82f6, transparent);
/* Size keywords */
background: radial-gradient(closest-side, #3b82f6, #1e1b4b);
background: radial-gradient(farthest-corner, #3b82f6, #1e1b4b);
/* Spotlight effect */
background: radial-gradient(circle 300px at 50% 30%,
rgba(59, 130, 246, 0.3), transparent
);Dégradés coniques
Les dégradés coniques transitionnent autour d'un point central.
/* Basic color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
/* Pie chart */
background: conic-gradient(
#3b82f6 0deg 120deg, /* 33% */
#22c55e 120deg 210deg, /* 25% */
#f59e0b 210deg 300deg, /* 25% */
#ef4444 300deg 360deg /* 17% */
);
/* Starting angle and position */
background: conic-gradient(from 45deg at 50% 50%, #3b82f6, #8b5cf6, #3b82f6);
/* Donut chart (combine with radial) */
background:
radial-gradient(circle 60px, var(--bg-primary) 99%, transparent),
conic-gradient(#3b82f6 0% 40%, #22c55e 40% 70%, #ef4444 70% 100%);
border-radius: 50%;Dégradés répétitifs
Les dégradés répétitifs permettent de créer des rayures et motifs.
/* Diagonal stripes */
background: repeating-linear-gradient(
45deg,
#3b82f6, #3b82f6 10px,
transparent 10px, transparent 20px
);
/* Horizontal stripes */
background: repeating-linear-gradient(
0deg,
#1e1b4b, #1e1b4b 2px,
transparent 2px, transparent 20px
);
/* Repeating radial */
background: repeating-radial-gradient(
circle, #3b82f6, #3b82f6 5px,
transparent 5px, transparent 15px
);
/* Repeating conic (sunburst) */
background: repeating-conic-gradient(
#3b82f6 0deg 10deg, transparent 10deg 20deg
);Dégradés multiples
Vous pouvez empiler plusieurs dégradés sur un seul élément.
/* Spotlight overlay on gradient */
background:
radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1), transparent 50%),
linear-gradient(135deg, #0f172a, #1e1b4b);
/* Cross pattern */
background:
linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%),
linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%);
background-size: 40px 40px;Texte en dégradé
Appliquez des dégradés au texte avec background-clip.
/* Gradient text effect */
.gradient-text {
background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; /* fallback */
}
/* Animated gradient text (using @property) */
@property --gradient-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.animated-gradient-text {
background: linear-gradient(var(--gradient-angle), #3b82f6, #ec4899, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: rotate-gradient 3s linear infinite;
}
@keyframes rotate-gradient {
to { --gradient-angle: 360deg; }
}Bordures en dégradé
CSS ne supporte pas directement les bordures en dégradé, mais il existe des solutions.
/* Method 1: border-image (no border-radius support) */
.gradient-border-1 {
border: 3px solid;
border-image: linear-gradient(135deg, #3b82f6, #ec4899) 1;
}
/* Method 2: pseudo-element (supports border-radius) */
.gradient-border-2 {
position: relative;
border-radius: 12px;
padding: 3px; /* border width */
background: linear-gradient(135deg, #3b82f6, #ec4899);
}
.gradient-border-2::before {
content: '';
position: absolute;
inset: 3px; /* same as padding */
background: var(--bg-card); /* inner background */
border-radius: 9px; /* outer radius minus border width */
}
.gradient-border-2 > * { position: relative; }
/* Method 3: outline + mask (modern browsers) */
.gradient-border-3 {
background:
linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
linear-gradient(135deg, #3b82f6, #ec4899) border-box;
border: 3px solid transparent;
border-radius: 12px;
}Motifs créatifs
Combinez les dégradés répétitifs pour créer des motifs complexes.
/* Checkerboard */
background:
conic-gradient(#1e293b 90deg, transparent 90deg 180deg,
#1e293b 180deg 270deg, transparent 270deg) 0 0 / 40px 40px;
/* Dots */
background:
radial-gradient(circle 3px, #3b82f6 99%, transparent) 0 0 / 20px 20px;
/* Carbon fiber */
background:
radial-gradient(#333 15%, transparent 16%),
radial-gradient(#333 15%, transparent 16%);
background-size: 8px 8px;
background-position: 0 0, 4px 4px;
background-color: #222;Performance et compatibilité
Les dégradés sont rendus par le GPU et sont très performants.
- GPU-rendered: Gradients are composited by the GPU, making them faster than equivalent images.
- Zero HTTP requests: Unlike background images, gradients add no network overhead.
- Retina-ready: Gradients scale perfectly at any resolution without becoming pixelated.
- Browser support: Linear and radial gradients have 99%+ support. Conic gradients work in all modern browsers (Chrome, Firefox, Safari, Edge). Use
@supportsfor progressive enhancement if targeting older browsers. - Avoid: Extremely complex gradients with 20+ color stops on elements that reflow frequently.
Questions fréquentes
Peut-on animer les dégradés CSS ?
Pas directement avec les transitions CSS, mais possible avec @property, background-position ou Houdini.
Différence entre linear-gradient et radial-gradient ?
Linéaire = ligne droite. Radial = du centre vers l'extérieur en cercle ou ellipse.
Comment créer une bordure en dégradé ?
Utilisez border-image avec un gradient ou un pseudo-élément.
Les dégradés affectent-ils les performances ?
Non, ils sont rendus par le GPU et bien plus performants que des images.
Comment éviter le banding de couleurs ?
Ajoutez des arrêts intermédiaires et utilisez des transitions plus longues.
Les dégradés CSS sont un outil polyvalent. Expérimentez avec notre outil.