Générateur de dégradés

Concevez un dégradé linéaire, radial ou conique, ajoutez des arrêts de couleur, ajustez la direction et copiez le CSS généré en un clic.

Type de dégradé
Arrêts de couleur
CSS
Ajustez les arrêts et la direction pour façonner votre dégradé.

Chaque dégradé est généré directement dans votre navigateur. Rien de ce que vous configurez ici n'est téléversé vers BroBroGo.

FAQ

Quelle est la différence entre les dégradés linéaires, radiaux et coniques?

Un dégradé linéaire fusionne les couleurs le long d'une ligne droite orientée selon l'angle de votre choix. Un dégradé radial les diffuse vers l'extérieur à partir du centre, sous forme de cercle ou d'ellipse. Un dégradé conique balaie les couleurs autour d'un point central, à la manière d'une roue chromatique.

Que sont les arrêts de couleur?

Chaque arrêt de couleur correspond à une teinte fixée à une position précise le long du dégradé — 0 % au point de départ, 100 % à l'arrivée. Déplacez un arrêt pour ajuster la transition de sa couleur, ou ajoutez d'autres arrêts pour obtenir un mélange plus riche. Vous pouvez en utiliser jusqu'à huit.

Comment puis-je contrôler la direction du dégradé?

Pour un dégradé linéaire ou conique, le curseur d'angle détermine la direction — 0° pointe vers le haut, 90° vers la droite. Un dégradé radial ne possède pas d'angle; choisissez plutôt une forme circulaire ou elliptique pour modifier la façon dont il se diffuse.

Rédigé et vérifié par l'équipe éditoriale de BroBroGo.Dernière mise à jour:

Fonctionnement du Générateur de dégradés

Le Générateur de dégradés est un outil conçu pour vous permettre de créer un dégradé CSS personnalisé en toute simplicité. Grâce à cette interface, vous pouvez sélectionner le type de dégradé, ajuster sa direction ou sa forme, et ajouter jusqu'à huit arrêts de couleur.

Au fur et à mesure que vous effectuez des modifications, l'outil affiche un aperçu en direct du dégradé. Une fois le résultat souhaité obtenu, vous pouvez copier le code CSS généré en un seul clic.

Paramètres de configuration de l'outil

Pour concevoir votre dégradé, vous disposez de plusieurs options de configuration dans l'interface:

  • Type de dégradé: Vous pouvez choisir entre les options Linéaire, Radial ou Conique.
  • Angle: Une valeur numérique destinée aux dégradés de type Linéaire ou Conique.
  • Forme: Permet de sélectionner une Ellipse ou un Cercle pour les dégradés de type Radial.
  • Arrêts de couleur: Vous pouvez configurer jusqu'à huit arrêts de couleur. Chaque arrêt comprend:
    • Couleur de l'arrêt: Une valeur de couleur spécifique.
    • Position: Un pourcentage allant de 0 % à 100 %.

Résultats générés

L'outil produit deux éléments en temps réel:

  1. Aperçu: Une représentation visuelle et immédiate de votre dégradé au fur et à mesure de vos ajustements.
  2. CSS: Le code CSS généré automatiquement, prêt à être intégré dans vos feuilles de style. Lorsque vous cliquez sur le bouton Copier le CSS, l'état de celui-ci change pour afficher la mention indiquant que le code a été copié.

Règles de comportement et valeurs par défaut

Le fonctionnement du générateur repose sur des règles précises et des configurations initiales:

  • Dégradé initial: Par défaut, le dégradé de départ comprend deux arrêts de couleur: #6366f1 à 0 % et #ec4899 à 100 %.
  • Nouveaux arrêts: Lorsque vous ajoutez un nouvel arrêt de couleur en cliquant sur Ajouter un arrêt, sa position par défaut est automatiquement fixée à 50 %.
  • Limite d'arrêts: Vous pouvez utiliser un maximum de huit arrêts de couleur. Dès que cette limite de huit arrêts est atteinte, le bouton Ajouter un arrêt est désactivé.
  • Gestion des angles: Le curseur d'angle définit la direction pour les types Linéaire et Conique, où 0° pointe vers le haut et 90° pointe vers la droite. Les dégradés de type Radial n'utilisent pas d'angle; ils reposent uniquement sur le choix d'une forme (Cercle ou Ellipse).

Confidentialité et traitement des données

La confidentialité de vos données est préservée lors de l'utilisation de cet outil. Chaque dégradé est généré directement dans votre navigateur. Aucune des configurations ou des valeurs que vous définissez dans l'outil n'est téléversée vers BroBroGo.

Profils d'utilisateurs visés

Cet outil s'adresse à différents profils de concepteurs et de développeurs:

  • Toute personne souhaitant créer un arrière-plan en CSS.
  • Un utilisateur ayant besoin d'ajuster rapidement deux couleurs et une direction pour obtenir un dégradé simple.
  • Un designer ou un développeur Web frontal (front-end) qui doit configurer précisément le type, la position ainsi que de multiples arrêts de couleur pour un dégradé complexe.

Foire aux questions (FAQ)

Quelle est la différence entre les dégradés linéaires, radiaux et coniques?
Un dégradé linéaire fusionne les couleurs le long d'une ligne droite orientée selon l'angle de votre choix. Un dégradé radial les diffuse vers l'extérieur à partir du centre, sous forme de cercle ou d'ellipse. Un dégradé conique balaie les couleurs autour d'un point central, à la manière d'une roue chromatique.

Que sont les arrêts de couleur?
Chaque arrêt de couleur correspond à une teinte fixée à une position précise le long du dégradé — 0 % au point de départ, 100 % à l'arrivée. Déplacez un arrêt pour ajuster la transition de sa couleur, ou ajoutez d'autres arrêts pour obtenir un mélange plus riche. Vous pouvez en utiliser jusqu'à huit.

Comment puis-je contrôler la direction du dégradé?
Pour un dégradé linéaire ou conique, le curseur d'angle détermine la direction — 0° pointe vers le haut, 90° vers la droite. Un dégradé radial ne possède pas d'angle; choisissez plutôt une forme circulaire ou elliptique pour modifier la façon dont il se diffuse.

Générateur de Cubic Bezier CSSAjustez les deux poignées pour concevoir une courbe d'accélération, observez le mouvement d'un point comparé à une vitesse constante et copiez la valeur cubic-bezier().Générateur d'Ombres CSSGlissez les curseurs pour façonner une ombre de boîte, superposez des couches pour donner de la profondeur et copiez le CSS obtenu instantanément.Générateur de Border RadiusArrondissez chaque coin à l'aide de curseurs, concevez des formes organiques de type « blob » avec le mode elliptique et copiez le CSS instantanément.Générateur de FlexboxConfigurez un conteneur flex et ses éléments à l'aide de contrôles visuels, observez le comportement de la mise en page en direct et copiez le code CSS en un clic.Générateur de Grid CSSDéfinissez vos colonnes et vos lignes, glissez votre curseur sur les cellules pour positionner vos éléments et copiez le code CSS de la grille ainsi que le code HTML associé en un clic.Calculateur de CSS clamp()Saisissez une taille pour petits et grands écrans et obtenez une valeur clamp() fluide qui s'adapte harmonieusement entre les deux — idéal pour les polices, le padding, les marges ou les espacements.Convertisseur de couleursConvertissez des couleurs entre les formats HEX, RGB, HSL, HSV, CMYK et LAB — modifiez un champ et tous les autres s'ajustent en temps réel.Formateur et minificateur CSSRéindentez du CSS embrouillé pour le lire, ou minifiez-le pour le publier, avec un mode sécuritaire qui ne réordonne jamais vos règles.Vérificateur de contrasteSaisissez une couleur de texte et d'arrière-plan pour obtenir le rapport de contraste WCAG et connaître les niveaux AA et AAA validés.