Comment créer un dégradé CSS (linéaire, radial, conique)
Apprenez à concevoir et coder de beaux dégradés CSS. Avec un générateur visuel gratuit.
Pourquoi utiliser des dégradés CSS ?
Les dégradés CSS permettent de créer des transitions de couleur fluides sans fichiers image. Ils sont parfaits pour les fonds, boutons, cartes et sections hero. Comme les dégradés sont générés dans le navigateur à partir de code, ils s'adaptent à toute résolution, n'ajoutent aucun poids de téléchargement et se règlent instantanément. Les deux principaux types sont les dégradés linéaires (flux de couleur en ligne droite) et les dégradés radiaux (flux circulaire), rejoints plus récemment par les dégradés coniques (qui balayent autour d'un centre).
Un dégradé bien choisi peut rehausser un design plat, fixer une ambiance ou guider l'œil vers un appel à l'action. La clé est de partir d'une paire de couleurs fortes et de choisir la bonne direction et les bons points d'arrêt.
Cas d'usage courants
- Sections hero : fonds accrocheurs pour les pages d'atterrissage
- Boutons : des dégradés subtils rendent les CTA plus cliquables
- Cartes et panneaux : profondeur de fond sans images
- États de chargement : effets de scintillement doux pour les placeholders
- Bordures et texte : les versions plus récentes du CSS permettent d'appliquer des dégradés aux bordures et aux contours de texte
Méthode 1 : Utilisez le générateur de dégradés CSS gratuit d'UtilBoxx (Recommandé)
Notre générateur de dégradés CSS vous permet de choisir des couleurs, régler les arrêts, la direction et de copier du CSS prêt pour la production. Voici comment l'utiliser :
- Allez sur utilboxx.com/fr/tools/color/gradient
- Choisissez deux couleurs ou plus avec les sélecteurs
- Ajustez arrêts, angle et forme (linéaire, radial, conique)
- Prévisualisez le résultat en direct dans le canvas
- Cliquez sur « Copier le CSS » pour récupérer le snippet
Pourquoi cette méthode fonctionne :
- Aperçu en direct sans rechargement
- Exporte un CSS propre et préfixé pour les navigateurs
- Supporte les dégradés linéaires, radiaux et coniques
- Permet de sauvegarder et partager les dégradés via URL
- Fonctionne sur mobile avec des contrôles tactiles
Méthode 2 : Écrire le CSS à la main
Un dégradé linéaire en CSS ressemble à :
```css background: linear-gradient(135deg, #ff7e5f, #feb47b); ```
Pour un dégradé radial :
```css background: radial-gradient(circle at center, #6a11cb, #2575fc); ```
Pour un dégradé conique (idéal pour des effets de camembert) :
```css background: conic-gradient(from 180deg, red, yellow, lime, cyan, blue, magenta, red); ```
Vous pouvez utiliser autant d'arrêts et de pourcentages que vous le souhaitez pour contrôler le mélange.
Méthode 3 : Utiliser une bibliothèque de dégradés préfabriqués
Des sites comme uiGradients, Grabient et ColorHub proposent des collections soignées de beaux dégradés. Vous parcourez, copiez le CSS et le collez dans votre projet. C'est l'option la plus rapide quand vous n'avez pas besoin d'un design sur mesure.
Questions fréquentes
Quelle est la différence entre dégradé linéaire, radial et conique ?
Le linéaire s'écoule en ligne droite ; le radial rayonne depuis un point central ; le conique balaie les couleurs autour d'un centre, comme une roue chromatique. Chacun crée un effet visuel différent.
Les dégradés CSS affectent-ils les performances ?
Non. Les dégradés sont calculés par le compositeur du navigateur et sont essentiellement gratuits à l'exécution. Ils sont plus légers que les images de fond et s'adaptent à toute résolution.
Puis-je utiliser des dégradés sur les bordures et le texte ?
Oui. Avec `border-image: linear-gradient(...)` pour les bordures, et `background-clip: text; color: transparent;` pour remplir le texte, vous pouvez appliquer des dégradés presque partout.
Comment rendre un dégradé accessible ?
Assurez un contraste suffisant avec le texte par-dessus. Utilisez un vérificateur de contraste et prévoyez une couleur unie de secours pour les utilisateurs qui réduisent les animations ou activent un contraste élevé.
Conclusion
Les dégradés CSS sont un outil de design puissant et léger. Pour un workflow rapide et visuel, le générateur de dégradés CSS d'UtilBoxx est la façon la plus simple de concevoir et copier du code prêt pour la production.