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

Créez de magnifiques dégradés CSS visuellement. Linéaires, radiaux, coniques. Exportez un code CSS propre. Gratuit, instantané.

About CSS Gradients

CSS gradients let you display smooth transitions between two or more colors. They're defined as background-image values:

  • Linear: Colors transition along a straight line (angle-based)
  • Radial: Colors radiate from a center point (circular/elliptical)
  • Conic: Colors rotate around a center point (pie-chart style)

Copy the generated CSS and paste it directly into your stylesheet.

About Gradient Generator

Créez de magnifiques dégradés CSS visuellement. Dégradés linéaires et radiaux avec plusieurs arrêts de couleur. Ajustez l'angle, la position et la distribution des couleurs. Copiez un code CSS prêt à l'emploi. Parfait pour les arrière-plans web, les boutons et la conception d'interfaces.

Linéaire et radial

Passez facilement entre les types de dégradés linéaires et radiaux. Contrôlez l'angle, la position et la forme pour des résultats parfaits.

Arrêts de couleur multiples

Ajoutez un nombre illimité d'arrêts de couleur. Faites glisser pour repositionner, ajustez chaque couleur avec le sélecteur. Créez facilement des dégradés complexes.

Sortie CSS en direct

Copiez le code CSS exact du dégradé. Prêt à coller dans vos feuilles de style, votre configuration Tailwind ou votre système de design.

Aperçu en temps réel

Visualisez votre dégradé pendant que vous le créez. L'aperçu en pleine largeur se met à jour instantanément à chaque changement de couleur ou d'angle.

📋 Common Use Cases

Conception Web

Créez des arrière-plans et des accents modernes en dégradé pour les boutons, les en-têtes et les sections héros.

Prototypage d'interface

Générez rapidement des styles de dégradé pour les maquettes et prototypes sans écrire de CSS à la main.

Actifs de marque

Concevez des éléments de marque en dégradé et des graphiques pour les réseaux sociaux avec vos couleurs de marque.

Transfert aux développeurs

Exportez un code CSS exact que les développeurs peuvent coller directement dans une feuille de style.

🪜 How to Use This Tool

  1. Choisissez le type de dégradé
    Sélectionnez un dégradé linéaire, radial ou conique.
  2. Choisissez vos couleurs
    Définissez les couleurs de début et de fin, et ajoutez des arrêts de couleur si nécessaire.
  3. Ajustez la direction
    Modifiez l'angle, la position ou la forme jusqu'à ce que le dégradé soit parfait.
  4. Exportez le CSS
    Copiez le code CSS généré et utilisez-le dans votre projet.

📚 Related Guides

Frequently Asked Questions

Cet outil de couleurs est-il gratuit ?
Oui. Tous les outils de couleurs sont entièrement gratuits. Aucune inscription n'est nécessaire.
Comment fonctionne le vérificateur de contraste ?
Il calcule les ratios de contraste WCAG 2.1 entre les couleurs de premier plan et d'arrière-plan, en indiquant si les niveaux AA et AAA sont respectés pour les textes normaux et grands.