Créer un dégradé CSS sans tâtonner
Les dégradés CSS remplacent avantageusement une image de fond : ils ne pèsent rien, s’adaptent à toutes les tailles d’écran et se modifient en une ligne de code. Mais écrire à la main un linear-gradient à quatre couleurs avec transparence demande beaucoup d’essais. Ce générateur vous montre le résultat à chaque réglage.
Les trois types de dégradés CSS sont disponibles. Le dégradé linéaire suit un angle ou une direction (vers la droite, vers le bas, en diagonale). Le dégradé radial part d’un point, en cercle ou en ellipse, à la position de votre choix. Le dégradé conique tourne autour d’un centre, idéal pour des roues de couleur ou des graphiques en secteurs.
Vous ajoutez autant d’arrêts de couleur que nécessaire, chacun avec sa couleur, son opacité et sa position en pourcentage. Deux arrêts à la même position créent une transition nette, utile pour des rayures ou des séparations franches. Des dégradés prédéfinis servent de point de départ.
Le code généré est une déclaration background: linear-gradient(...) (ou radial / conic) à copier directement dans votre feuille de style. Le générateur fonctionne entièrement dans votre navigateur et il est gratuit sans limite : pas d’essai à épuiser ni d’abonnement nécessaire.
Comment créer un dégradé CSS ?
- Choisissez le type : linéaire, radial ou conique, ou partez d’un preset.
- Réglez l’angle ou la direction, ou la forme (cercle / ellipse) et la position pour un radial.
- Ajoutez, supprimez ou déplacez les arrêts de couleur, avec couleur, opacité et position en %.
- Vérifiez le rendu dans l’aperçu en direct.
- Copiez le CSS généré.
Quand utiliser un dégradé CSS ?
- Fond de section hero ou de bannière sans image à charger.
- Bouton ou carte avec un léger effet de profondeur.
- Voile transparent par-dessus une photo pour rendre un texte lisible.
- Rayures ou motifs simples avec des arrêts de couleur nets.
- Roue de couleurs ou indicateur circulaire avec conic-gradient.
Syntaxe des dégradés CSS
- Linéaire : linear-gradient(135deg, #6366f1 0%, #ec4899 100%). 0deg va vers le haut, 90deg vers la droite.
- Radial : radial-gradient(circle at 30% 40%, #fff 0%, #000 100%).
- Conique : conic-gradient(from 0deg at 50% 50%, red, yellow, green, red).
- Transparence : utilisez rgba() ou une couleur hexadécimale à 8 chiffres pour l’opacité de chaque arrêt.
- Les dégradés sont des images CSS : on peut les superposer avec plusieurs valeurs séparées par des virgules dans background.
Foire Aux Questions
Le générateur est-il gratuit ?
Oui, entièrement. Les générateurs CSS de ToolStudio sont gratuits et sans limite : vous ajustez les réglages, regardez l’aperçu en direct et copiez le CSS autant de fois que vous voulez, sans compte ni abonnement.
Les dégradés CSS sont-ils compatibles avec tous les navigateurs ?
Les dégradés linéaires et radiaux sont pris en charge par tous les navigateurs modernes, sans préfixe. Le dégradé conique l’est aussi dans les versions actuelles de Chrome, Edge, Firefox et Safari.
Combien de couleurs puis-je utiliser ?
Autant que vous voulez : ajoutez des arrêts de couleur et réglez la position et l’opacité de chacun.
Comment obtenir une transition nette ?
Placez deux arrêts de couleurs différentes à la même position : le passage de l’une à l’autre devient une ligne franche.
Puis-je utiliser le dégradé sur du texte ?
Oui, en CSS : appliquez le background généré au texte puis ajoutez background-clip: text et une couleur de texte transparente.