Gradient Generator

Composez des dégradés CSS linéaires, radiaux ou coniques. Choisissez vos couleurs et l'angle, prévisualisez en direct et exportez en un clic.

Paramètres

Aperçu

Aperçu

Code


            
            
            

Guide d'utilisation

Trois fonctions de dégradé existent : linear-gradient (linéaire), radial-gradient (circulaire) et conic-gradient (rotatif). Elles se placent dans la propriété background.

  • L'angle ne s'applique qu'aux dégradés linéaires et coniques.
  • Ajoutez une 3e couleur pour des transitions plus riches.

FAQ

Comment animer un dégradé ?

Agrandissez le background-size puis animez background-position avec @keyframes pour un effet de dégradé en mouvement.

Quelle différence linear vs radial ?

linear progresse selon une ligne droite et un angle ; radial rayonne depuis un point central vers l'extérieur.