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

Choisissez le type de dégradé, les couleurs et leurs positions, puis copiez le code.

Quel est le problème ?

Ajoutez ce calculateur à votre site ou blog

Copiez ce code et collez-le dans votre page (dans l’éditeur HTML). Gratuit, la hauteur s’ajuste automatiquement.

Mode d’emploi

  • Linéaire suit un angle : 90° va de gauche à droite, 180° de haut en bas.
  • Radial s’étend depuis un point central.
  • Conique tourne autour du centre comme un cercle chromatique.

La position d’un arrêt (0–100 %) est l’endroit où la couleur est pure ; l’espace entre deux arrêts est le mélange.

Exemple concret

linear-gradient(135deg, #0f6e56 0%, #42b08d 50%, #f6ecd6 100%) donne un dégradé en diagonale du vert profond au crème.

Questions fréquentes

Est-ce compatible avec tous les navigateurs ?
Oui, les dégradés fonctionnent dans tous les navigateurs modernes.
Comment faire une transition nette ?
Placez deux couleurs à la même position, par ex. rouge 50 % et bleu 50 %.
Puis-je l’utiliser dans Canva ou Photoshop ?
Oui — téléchargez le PNG et utilisez-le comme fond.

Recherches fréquentes

  • générateur dégradé css
  • générateur de dégradé
  • linear gradient
  • fond dégradé
  • créer un fond dégradé