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

Créez un dégradé linéaire, radial ou conique, ajoutez des arrêts de couleur et réglez la direction, puis copiez le CSS en un clic.

Type de dégradé
Arrêts de couleur
CSS
Ajustez les arrêts et la direction pour façonner votre dégradé.

Chaque dégradé est calculé dans votre navigateur. Rien de ce que vous réglez ici n’est envoyé à BroBroGo.

FAQ

Quelle est la différence entre un dégradé linéaire, radial et conique ?

Un dégradé linéaire fond les couleurs le long d’une ligne droite que vous orientez avec un angle. Un dégradé radial les diffuse depuis le centre vers l’extérieur, en cercle ou en ellipse. Un dégradé conique les fait tourner autour du centre, comme une roue chromatique.

Que sont les arrêts de couleur ?

Chaque arrêt de couleur est une couleur fixée à une position du dégradé : 0 % au début, 100 % à la fin. Déplacez un arrêt pour changer l’endroit où sa couleur domine, ou ajoutez-en d’autres pour un fondu plus riche. Vous pouvez en placer jusqu’à huit.

Comment régler la direction ?

Pour un dégradé linéaire ou conique, le curseur d’angle définit la direction : 0° vers le haut, 90° vers la droite. Le dégradé radial n’a pas d’angle ; choisissez plutôt une forme de cercle ou d’ellipse pour modifier sa diffusion.