Code & web

Générateur de dégradé CSS

Créez un dégradé linéaire ou radial et copiez le code CSS prêt à l'emploi.

Intégrer ce calculateur sur votre site

Copiez ce code et collez-le dans votre page (WordPress, Wix, Webflow, HTML…). C'est gratuit : merci de laisser le lien vers HOD Calc.

Comment ça marche

linear-gradient(angle, couleurs) ou radial-gradient(circle, couleurs). Couleurs acceptées : #hex, rgb(), hsl() ou noms CSS.

Les résultats sont donnés à titre indicatif et ne remplacent pas l'avis d'un professionnel.

Exemple de calcul

Avec les valeurs proposées par défaut :

  • Couleur 1#2b50e8
  • Couleur 2#e8445e
  • Couleur 3 (facultative)#ec8a00
  • TypeLinéaire
  • Angle (degrés)135

on obtient :

  • Couleurs#2b50e8 → #e8445e → #ec8a00
  • AstuceLa première ligne sert de couleur de secours

Questions fréquentes

Comment fonctionne l'outil « Générateur de dégradé CSS » ?

linear-gradient(angle, couleurs) ou radial-gradient(circle, couleurs). Couleurs acceptées : #hex, rgb(), hsl() ou noms CSS.

Quelles informations faut-il saisir ?

Il suffit de renseigner : couleur 1, couleur 2, couleur 3, type, angle. Le résultat se met à jour pendant que vous tapez.

Pouvez-vous donner un exemple ?

Couleur 1 : #2b50e8; Couleur 2 : #e8445e; Couleur 3 (facultative) : #ec8a00; Type : Linéaire; Angle (degrés) : 135 → Couleurs : #2b50e8 → #e8445e → #ec8a00; Astuce : La première ligne sert de couleur de secours.

Ce calculateur est-il gratuit et mes données restent-elles privées ?

Oui. HOD Calc est entièrement gratuit et sans inscription. Le calcul est fait directement dans votre navigateur : rien de ce que vous tapez n'est envoyé ni enregistré.