Aller au contenu
ToolFarmToolFarm
Design

Générateur de dégradés

Créez des dégradés CSS et voyez le rendu en direct pendant que vous les ajustez.

2 min de lecture

À quoi sert cet outil

Générateur de dégradés CSS avec aperçu en direct. Choisissez deux couleurs, le type de dégradé (linéaire, radial ou conique) et l'angle. La règle CSS apparaît, prête à copier.

Pas encore les couleurs ? Commencez par générateur de palettes ou passez n'importe quelle valeur dans le convertisseur de couleurs.

À quoi ça vous sert

  • Créer un fond de hero pour une landing rapide.
  • Générer un dégradé pour un bouton ou une carte mise en avant.
  • Tester des combinaisons de couleurs avant de figer une palette.
  • Sortir un dégradé prêt pour Tailwind ou pour une variable de thème.

Comment l'utiliser

  1. Choisissez la couleur de départ et la couleur d'arrivée.
  2. Sélectionnez le type de dégradé : linéaire, radial ou conique.
  3. S'il est linéaire, ajustez l'angle en degrés.
  4. Copiez la règle CSS ou l'aperçu HTML qui s'affiche en dessous.

Tout le travail se passe dans votre navigateur. Aucun fichier n'est envoyé à un serveur. Voir plus d'outils dans le même champ.

Préréglages de dégradés qui marchent

Si vous ne savez pas par où commencer, essayez ces dégradés. Chacun colle à un usage précis et ce sont des combinaisons éprouvées.

  • Sunset

    #F97316 → #EF4444 · 135°

    Heros chaleureux, CTA commerciaux.

  • Lime acide

    #A3E635 → #22C55E · 135°

    Produits santé, fintech verte, dashboards.

  • Océan

    #0EA5E9 → #1E40AF · 90°

    Tech, SaaS B2B, fonds professionnels.

  • Lavande

    #A78BFA → #EC4899 · 45°

    Branding créatif, beauté, crypto.

  • Charbon

    #1F2937 → #4B5563 · 180°

    Mode sombre, fonds sobres et élégants.

  • Mangue

    #FBBF24 → #F97316 · 135°

    Food and beverage, dégradés joyeux.

D'autres outils qu'on utilise souvent dans le même flux.

Design
Design

Générateur de palettes

Composez des palettes harmonieuses à partir de n'importe quelle couleur de base.

Populaire
Design

Convertisseur de couleurs

Collez une couleur en HEX, RGB ou HSL et récupérez les autres formats au passage.

Questions fréquentes

Quelle différence entre dégradé linéaire, radial et conique ?

Le linéaire interpole les couleurs le long d'un axe droit. Le radial diffuse la couleur depuis un point central. Le conique fait tourner les couleurs autour d'un point, comme les roues de couleurs dans Photoshop. Chacun a sa scène.

Comment choisir l'angle d'un dégradé linéaire ?

0 degré va du bas vers le haut, 90 degrés de la gauche vers la droite, 180 du haut vers le bas et 270 de la droite vers la gauche. Les angles intermédiaires créent des diagonales douces. Pour un look moderne, 135 ou 45 fonctionnent bien.

Le CSS généré est-il utilisable tel quel ?

Oui. La sortie est une propriété background-image prête à coller dans votre feuille de style ou dans une variable CSS personnalisée.

Ça marche avec plus de deux couleurs ?

Pour rester simple, cette version utilise deux couleurs. Si vous avez besoin de plus d'étapes, copiez la règle générée et ajoutez les étapes supplémentaires directement dans la règle CSS.