Générateur de dégradé CSS
Ajoutez des points de couleur, choisissez linéaire, radial ou conique, et copiez le code CSS background terminé directement dans votre feuille de style. Partez d'un préréglage ou créez le vôtre de zéro.
Préréglages
Type
Arrêts de couleur
Aperçu
CSS
Questions fréquentes
Quelle est la différence entre un dégradé linéaire, radial et conique ?
Un dégradé linéaire fait transiter les couleurs le long d'une ligne droite selon un angle choisi (0° pointe vers le haut, 90° vers la droite). Un dégradé radial fait rayonner les couleurs depuis un point central en cercle ou en ellipse. Un dégradé conique balaie les couleurs autour d'un point central comme une roue chromatique, à partir d'un angle choisi. Les trois sont largement pris en charge par tous les navigateurs modernes.
Combien de points de couleur puis-je ajouter ?
Autant que vous voulez, chacun avec sa propre couleur et position (0-100%). La position détermine où, le long du dégradé, cette couleur est centrée, ce qui permet de créer des transitions nettes (points rapprochés) ou des fondus doux (points espacés).
Les préréglages m'enferment-ils dans ce dégradé exact ?
Non. Cliquer sur un préréglage charge simplement son type, ses couleurs et ses points dans l'éditeur comme point de départ - chaque réglage reste entièrement modifiable ensuite, vous pouvez donc ajuster l'angle, ajouter des points ou changer les couleurs pour vous l'approprier.
Puis-je utiliser ce dégradé comme image de fond, et pas seulement comme fond uni ?
Oui, le code généré est une valeur valide pour les propriétés CSS background ou background-image. Il fonctionne partout où une image de fond serait utilisée, y compris superposé à une vraie image via une liste background-image séparée par des virgules.