Gradient Generator

Build linear, radial or conic CSS gradients. Pick your colors and angle, preview live, and export in one click.

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.