Aller au contenu
ToolFarmToolFarm
Design

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

Créez des dégradés CSS en ligne avec un aperçu en direct: linéaire, radial et conique. Copiez le code de votre fond, gratuit et sans envoi.

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°

    Alimentation et boissons, dégradés joyeux.

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

Design
Design

Générateur de Palettes de Couleurs

Générez des palettes harmonieuses à partir de n'importe quelle couleur de base: analogues, complémentaires et plus. Gratuit et prêt à copier.

Populaire
Design

Convertisseur de Couleur: HEX, RGB

Convertissez des couleurs entre HEX, RGB et HSL en ligne. Collez un format et obtenez les autres au passage. Gratuit et dans votre navigateur.

Design

Vérifier le Contraste de Couleur (WCAG)

Vérifiez le contraste de couleur WCAG entre texte et fond, avec aperçus en direct, verdict réussite ou échec et suggestions accessibles.

Design

Générateur de border radius CSS

Crée un border-radius en CSS avec un aperçu en direct : arrondis chaque coin séparément en pixels ou en pour cent, puis copie le code. Gratuit et dans ton navigateur.

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.