Guide complet des dégradés CSS : linéaires/radiaux/coniques et effets visuels avancés

Les trois types de dégradés CSS

Type	Syntaxe	Effet visuel
Dégradé linéaire	`linear-gradient()`	Transition en ligne droite
Dégradé radial	`radial-gradient()`	Expansion du centre vers l'extérieur
Dégradé conique	`conic-gradient()`	Rotation autour du centre

Dégradé linéaire (linear-gradient)

Syntaxe de base

/* Direction + points de couleur */
background: linear-gradient(direction, point1, point2, ...);

/* Exemple */
background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(135deg, #f093fb, #f5576c);
background: linear-gradient(to bottom right, #4facfe, #00f2fe);

Paramètres de direction

/* Directions par mot-clé */
to top          /* De bas en haut */
to right        /* De gauche à droite */
to bottom       /* De haut en bas (par défaut) */
to left         /* De droite à gauche */
to top right    /* Diagonale */

/* Angles (plus précis) */
0deg    /* → to top */
90deg   /* → to right */
180deg  /* → to bottom */
45deg   /* → Diagonale haut droite */
135deg  /* → Diagonale bas droite */

Contrôle des points de couleur

/* Distribution équidistante (position automatique) */
background: linear-gradient(red, yellow, green);
/* red: 0%, yellow: 50%, green: 100% */

/* Position spécifiée */
background: linear-gradient(red 0%, yellow 30%, green 100%);

/* Bordure dure (sans transition) */
background: linear-gradient(red 50%, blue 50%);

/* Dégradé par segments */
background: linear-gradient(
  red 0%, red 20%,
  yellow 20%, yellow 40%,
  green 40%, green 60%,
  blue 60%, blue 80%,
  purple 80%, purple 100%
);

Dégradé radial (radial-gradient)

Syntaxe de base

background: radial-gradient(forme taille at position, points...);

/* Exemple */
background: radial-gradient(circle, #ff6b6b, #556270);
background: radial-gradient(ellipse at top, #ffd89b, #19547b);
background: radial-gradient(circle 100px at center, #fff, #000);

Forme

circle    /* Cercle */
ellipse   /* Ellipse (par défaut) */

Mots-clés de taille

closest-side     /* Jusqu'au côté le plus proche */
farthest-side    /* Jusqu'au côté le plus éloigné */
closest-corner   /* Jusqu'au coin le plus proche */
farthest-corner  /* Jusqu'au coin le plus éloigné (par défaut) */

Position

at center           /* Centré (par défaut) */
at top left         /* Coin supérieur gauche */
at 30% 70%          /* Positionnement en pourcentage */
at 100px 200px      /* Positionnement en pixels */

Dégradé conique (conic-gradient)

Syntaxe de base

background: conic-gradient(from angle-départ at position, points...);

/* Exemple */
background: conic-gradient(red, yellow, green, blue, red);
background: conic-gradient(from 45deg, #f00, #0f0, #00f, #f00);

Pratique : graphique en camembert

.pie-chart {
  background: conic-gradient(
    #3b82f6 0% 35%,
    #ef4444 35% 55%,
    #22c55e 55% 80%,
    #f59e0b 80% 100%
  );
  border-radius: 50%;
}

Pratique : roue des couleurs

.color-wheel {
  background: conic-gradient(
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
  );
  border-radius: 50%;
}

Effets visuels avancés

1. Superposition de dégradés (couches multiples)

.multi-gradient {
  background:
    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

2. Fond en grille

.grid-bg {
  background:
    linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

3. Fond à points

.dot-bg {
  background: radial-gradient(circle 2px, #999 100%, transparent 100%);
  background-size: 20px 20px;
}

4. Effet de brillance (Shine Effect)

.shine-button {
  position: relative;
  overflow: hidden;
  background: #3b82f6;
}

.shine-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.4) 45%,
    rgba(255,255,255,0.4) 55%,
    transparent 60%
  );
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

5. Glassmorphisme

.glass-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

6. Texte en dégradé

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

7. Bordure en dégradé

.gradient-border {
  position: relative;
  background: #1f2937;
  border-radius: 12px;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
  border-radius: 14px;
  z-index: -1;
}

8. Dégradé animé

.animated-gradient {
  background: linear-gradient(
    -45deg,
    #ee7752, #e73c7e, #23a6d5, #23d5ab
  );
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Dégradés répétitifs

/* Dégradé linéaire répétitif → rayures */
.repeating-linear {
  background: repeating-linear-gradient(
    45deg,
    #3b82f6,
    #3b82f6 10px,
    #60a5fa 10px,
    #60a5fa 20px
  );
}

/* Dégradé radial répétitif → cible */
.repeating-radial {
  background: repeating-radial-gradient(
    circle,
    #3b82f6,
    #3b82f6 10px,
    #60a5fa 10px,
    #60a5fa 20px
  );
}

/* Dégradé conique répétitif → radar */
.repeating-conic {
  background: repeating-conic-gradient(
    #3b82f6 0deg 30deg,
    #60a5fa 30deg 60deg
  );
}

Utiliser le générateur de dégradés de Tools Ku

Ouvrez le Générateur de dégradés CSS
Sélectionnez le type de dégradé (linéaire/radial/conique)
Ajoutez des points de couleur, ajustez les positions et les couleurs
Ajustez la direction/l'angle
Prévisualisez l'effet en temps réel
Copiez le code CSS généré

Optimisation des performances des dégradés

Conseil	Description
Éviter trop de points de couleur	3-5 points est optimal, plus de 8 affecte le rendu
Préférer hex plutôt que rgba	`#ff000080` est plus court que `rgba(255,0,0,0.5)`
Garder la zone de dégradé petite	Les grands dégradés augmentent le coût de dessin
Utiliser background-position pour les animations	Ne pas animer les valeurs des points de couleur
`will-change: background`	Ajouter un indice pour les dégradés animés

Compatibilité des navigateurs

Fonctionnalité	Chrome	Firefox	Safari
linear-gradient	✅ Tous	✅ Tous	✅ Tous
radial-gradient	✅ Tous	✅ Tous	✅ Tous
conic-gradient	69+	83+	12.1+
repeating-conic-gradient	69+	83+	12.1+
Dégradés multiples	✅ Tous	✅ Tous	✅ Tous
`background-clip: text`	✅	49+	✅

Résumé

Les dégradés CSS sont le couteau suisse du design visuel — des simples transitions bicolores aux fonds en grille complexes, effets de lumière et glassmorphisme, les dégradés peuvent tout faire. En maîtrisant les trois types (linéaire/radial/conique) + le contrôle des points de couleur + la superposition multicouche, vous pourrez réaliser la plupart des effets visuels. Le Générateur de dégradés de Tools Ku vous permet d'ajuster visuellement les paramètres et de copier le code CSS en un clic.