Passer au contenu principal

Générateur de Dégradés CSS

Outil gratuit en ligne pour créer visuellement des dégradés CSS linéaires, radiaux et coniques et copier le code.

Aperçu

Type de dégradé

Angle

°

Points de couleur

%
%

Code CSS

background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);

Dégradés prédéfinis

Fonctionnalités Principales​

  • 3 Types: Dégradés linéaires, radiaux et coniques
  • Aperçu en Temps Réel: Voir les changements instantanément
  • Points de Couleur: Ajouter jusqu'à 8 points de couleur
  • Contrôle d'Angle: Définir l'angle pour les dégradés linéaires/coniques (0-360°)
  • Contrôle de Position: Définir chaque position de couleur de 0-100%
  • Préréglages: 6 magnifiques dégradés prédéfinis
  • Copie en Un Clic: Copier le code CSS instantanément

Types de Dégradés​

1. Dégradé Linéaire​

background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);
  • Les couleurs transitent dans une direction
  • Direction spécifiée par angle (0° = haut, 90° = droite, 180° = bas, 270° = gauche)
  • Type le plus utilisé

Cas d'Usage:

  • Arrière-plans de boutons
  • Arrière-plans d'en-têtes
  • Arrière-plans de cartes

2. Dégradé Radial​

background: radial-gradient(circle, #3498db 0%, #e74c3c 100%);
  • Les couleurs transitent du centre vers l'extérieur
  • Crée des effets circulaires
  • Utile pour les effets de projecteur

Cas d'Usage:

  • Décorations d'arrière-plan
  • Effets de survol de boutons
  • Arrière-plans de logos

3. Dégradé Conique​

background: conic-gradient(from 90deg, #3498db 0%, #e74c3c 100%);
  • Les couleurs tournent autour du centre
  • Parfait pour les graphiques circulaires et les roues chromatiques
  • Fonctionnalité relativement nouvelle ajoutée dans CSS3

Cas d'Usage:

  • Graphiques circulaires
  • Anneaux de progression
  • Roues chromatiques

Points de Couleur​

Concept de Base​

Les points de couleur définissent où les couleurs spécifiques commencent ou se terminent dans un dégradé.

/* 2 couleurs */
linear-gradient(90deg, #FF0000 0%, #0000FF 100%)

/* 3 couleurs */
linear-gradient(90deg, #FF0000 0%, #00FF00 50%, #0000FF 100%)

/* 4 couleurs */
linear-gradient(90deg, #FF0000 0%, #FFFF00 33%, #00FF00 66%, #0000FF 100%)

Conseils de Position​

  • 0%: Point de départ
  • 50%: Point médian
  • 100%: Point final
  • Les positions qui se chevauchent créent des transitions de couleur nettes
  • Une distribution uniforme crée des transitions douces

Exemples Pratiques​

1. Dégradé de Bouton​

.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.button:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

2. Superposition d'Arrière-plan​

.hero-section {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url('background.jpg');
  background-size: cover;
}

3. Dégradé de Texte​

.gradient-text {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: bold;
}

4. Barre de Progression​

.progress-bar {
  background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
  height: 8px;
  border-radius: 4px;
  width: 60%; /* état de progression */
}

5. Arrière-plan de Carte​

.card {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  padding: 30px;
  border-radius: 12px;
  color: white;
}

Dégradés Prédéfinis​

Sunset (Coucher de Soleil)​

background: linear-gradient(90deg, #FF512F 0%, #F09819 100%);

Combinaison chaude orange-rouge, sensation vibrante

Ocean (Océan)​

background: linear-gradient(135deg, #2E3192 0%, #1BFFFF 100%);

Combinaison fraîche bleu-cyan, sensation propre et fraîche

Forest (Forêt)​

background: linear-gradient(90deg, #134E5E 0%, #71B280 100%);

Combinaison calme turquoise-vert, sensation naturelle

Purple Dream (Rêve Violet)​

background: linear-gradient(45deg, #C471F5 0%, #FA71CD 100%);

Combinaison onirique violet-rose, moderne et tendance

Fire (Feu)​

background: radial-gradient(circle, #FDBB2D 0%, #22C1C3 100%);

Combinaison radiale jaune-cyan, sensation dynamique

Rainbow (Arc-en-ciel)​

background: linear-gradient(90deg, #FF0000 0%, #FFFF00 33%, #00FF00 66%, #0000FF 100%);

Effet arc-en-ciel à 4 couleurs, vibrant et animé

Compatibilité des Navigateurs​

Dégradé Linéaire​

  • ✅ Chrome 26+
  • ✅ Firefox 16+
  • ✅ Safari 7+
  • ✅ Edge 12+
  • ✅ Tous les navigateurs mobiles

Dégradé Radial​

  • ✅ Chrome 26+
  • ✅ Firefox 16+
  • ✅ Safari 7+
  • ✅ Edge 12+
  • ✅ Tous les navigateurs mobiles

Dégradé Conique​

  • ✅ Chrome 69+
  • ✅ Firefox 83+
  • ✅ Safari 12.1+
  • ✅ Edge 79+
  • ⚠️ Non pris en charge dans IE

Optimisation des Performances​

1. Utiliser will-change​

.gradient-element {
  will-change: background;
}

Accélération GPU pour les animations

2. Utiliser des Images pour les Dégradés Complexes​

Convertir les dégradés très complexes en images pour de meilleures performances

3. Classes Réutilisables​

.gradient-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Conseils de Design​

1. Sélection de Couleur​

  • Teintes similaires: Transition douce
  • Couleurs complémentaires: Contraste fort
  • 3 couleurs ou moins: Généralement suffisant

2. Sélection d'Angle​

  • 90°: Gauche à droite (le plus courant)
  • 180°: Haut en bas
  • 135°: Diagonale (sensation dynamique)

3. Utiliser la Transparence​

background: linear-gradient(90deg,
  rgba(52, 152, 219, 0.8) 0%,
  rgba(231, 76, 60, 0.8) 100%
);

4. Animations​

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

.animated-gradient {
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

Considérations d'Accessibilité​

1. Rapport de Contraste​

Le texte sur les dégradés nécessite un rapport de contraste suffisant (standard WCAG 4.5:1)

2. Lisibilité du Texte​

/* Améliorer la lisibilité avec une ombre de texte */
.text-on-gradient {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

3. Utiliser des Superpositions​

.gradient-with-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

Outils Associés​