Comment créer des dégradés CSS
Les dégradés CSS permettent de créer des transitions de couleurs fluides sans fichier image. Ils sont plus légers que les images, s'adaptent parfaitement à toute taille d'écran et sont simples à personnaliser.
Types de dégradés CSS
Dégradé linéaire — les couleurs passent en ligne droite (haut en bas, gauche-droite ou tout angle).
background: linear-gradient(135deg, #667eea, #764ba2);Dégradé radial — les couleurs rayonnent depuis un point central selon un motif circulaire ou elliptique.
background: radial-gradient(circle, #667eea, #764ba2);Dégradé conique — les couleurs tournent autour d'un point central, comme une roue chromatique.
background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);Comment créer des dégradés visuellement
- Sélectionnez le type de dégradé — choisissez linéaire ou radial et réglez l'angle ou la position.
- Ajoutez des points de couleur — cliquez pour ajouter des couleurs à différentes positions du dégradé. Ajustez chaque couleur et sa position.
- Copiez le CSS — copiez le code généré et collez-le dans votre feuille de style.
Utiliser un générateur visuel est plus rapide que d'écrire la syntaxe à la main, surtout avec plusieurs points de couleur.
Motifs de dégradé courants
Arrière-plan de section hero — un dégradé subtil à deux couleurs ajoute de la profondeur sans distraire du texte.
background: linear-gradient(135deg, #0f172a, #1e3a5f);Surbrillance de bouton — un léger dégradé donne un effet tridimensionnel aux boutons.
background: linear-gradient(180deg, #3b82f6, #2563eb);Voile sur image — un voile en dégradé améliore la lisibilité du texte sur des photos.
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));Bordure d'accentuation — utilisez un dégradé comme bordure pour créer de l'intérêt visuel.
border-image: linear-gradient(90deg, #667eea, #764ba2) 1;Astuces
- Restez subtil — les meilleurs dégradés se remarquent à peine. Un léger glissement entre deux couleurs similaires ajoute de la profondeur. Les dégradés arc-en-ciel dramatiques font rarement professionnel.
- Utilisez des dégradés plutôt que des images — un dégradé CSS se charge instantanément sans requête réseau. Remplacez les images de fond décoratives par des dégradés quand c'est possible.
- Testez en mode sombre — les dégradés qui rendent bien sur fond clair peuvent se délaver ou jurer en mode sombre. Définissez au besoin des dégradés différents pour chaque thème.
- Attention au contraste du texte — si vous placez du texte sur un dégradé, vérifiez qu'il reste lisible sur toute la plage du dégradé, pas seulement sur la partie la plus claire ou la plus sombre.
Questions fréquentes
Les dégradés CSS fonctionnent-ils dans tous les navigateurs ?
Oui. Les dégradés linéaires et radiaux sont pris en charge dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Les dégradés coniques ont un support un peu plus récent mais fonctionnent dans toutes les versions actuelles.
Puis-je utiliser plus de deux couleurs ?
Oui. Les dégradés CSS acceptent autant de points de couleur que vous voulez. Chaque point définit une couleur et une position le long du dégradé.
Les dégradés affectent-ils les performances ?
Non. Les dégradés CSS sont rendus par le navigateur et sont bien plus légers que des fichiers images. Ils s'adaptent parfaitement à n'importe quelle taille d'écran sans téléchargement supplémentaire.
Peut-on animer un dégradé ?
Pas directement avec une transition CSS sur la propriété background, mais vous pouvez animer background-position ou utiliser des propriétés personnalisées CSS avec @property pour créer des animations de dégradé fluides.