Générateur de dégradé CSS gratuit en ligne. Créez des dégradés linéaires et radiaux, ajustez direction, couleurs et points d'arrêt. Dans le navigateur.
Appuyez sur Ctrl+D pour ajouter cette page aux favoris
Générateur gratuit de dégradés CSS. Créez visuellement des dégradés linéaires, radiaux et coniques, puis copiez le code CSS. Tout dans votre navigateur.
Comment utiliser Générateur de dégradé ?
Sélectionnez le type de dégradé.
Ajoutez des arrêts de couleur.
Copiez le code CSS généré.
Questions fréquentes sur Générateur de dégradé
Quels types de dégradés sont supportés ?
Linéaires, radiaux et coniques.
Puis-je copier le code CSS directement ?
Oui, copiez en un clic le code CSS à appliquer directement.
Pourquoi une bande grisâtre apparaît-elle au milieu de mon dégradé ?
Quand deux couleurs sont diamétralement opposées sur le cercle, le mélange traverse un point où la saturation tombe presque à zéro, ce qui se traduit par une bande grise terne. Les duos bleu-orange et rouge-vert en sont les coupables habituels. Ajouter une troisième couleur comme arrêt intermédiaire contourne ce gris, et choisir deux teintes voisines sur le cercle supprime le problème d'emblée.
Puis-je enregistrer le dégradé sous forme d'image et pas seulement en CSS ?
Oui, vous pouvez télécharger un PNG et l'utiliser directement en fond de diapositive, en visuel pour les réseaux ou dans une maquette d'impression. Pour une page web, le CSS reste toutefois préférable : aucun fichier à charger, un dégradé qui s'étire à toutes les tailles d'écran sans casser, et jamais l'effet d'escalier d'une image matricielle agrandie.
Comment bien utiliser Générateur de dégradé ?
Mélangez deux teintes proches sur le cercle chromatique : les opposées virent au gris sale au centre.
Une diagonale à 135 degrés reste la valeur sûre pour les bannières et les fonds de carte.
Si du texte se pose dessus, testez le contraste sur l'arrêt le plus clair du dégradé.