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

Créez un dégradé linéaire, radial ou conique, ajoutez des arrêts de couleur et réglez la direction, puis copiez le CSS 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 calculé dans votre navigateur. Rien de ce que vous réglez ici n’est envoyé à BroBroGo.

FAQ

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

Un dégradé linéaire fond les couleurs le long d’une ligne droite que vous orientez avec un angle. Un dégradé radial les diffuse depuis le centre vers l’extérieur, en cercle ou en ellipse. Un dégradé conique les fait tourner autour du centre, comme une roue chromatique.

Que sont les arrêts de couleur ?

Chaque arrêt de couleur est une couleur fixée à une position du dégradé : 0 % au début, 100 % à la fin. Déplacez un arrêt pour changer l’endroit où sa couleur domine, ou ajoutez-en d’autres pour un fondu plus riche. Vous pouvez en placer jusqu’à huit.

Comment régler la direction ?

Pour un dégradé linéaire ou conique, le curseur d’angle définit la direction : 0° vers le haut, 90° vers la droite. Le dégradé radial n’a pas d’angle ; choisissez plutôt une forme de cercle ou d’ellipse pour modifier sa diffusion.

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 CSS permet de concevoir des transitions de couleurs personnalisées directement depuis une interface visuelle. L'outil propose de choisir le type de dégradé, d'ajuster son orientation ou sa forme, et de configurer jusqu'à huit arrêts de couleur.

Chaque modification appliquée aux paramètres met à jour instantanément un aperçu visuel du dégradé. Une fois le rendu obtenu, le code CSS correspondant est généré automatiquement et peut être récupéré pour être intégré dans une feuille de style.

Les types de dégradés CSS et leurs paramètres

Le comportement visuel d'un dégradé dépend du modèle géométrique sélectionné pour la transition des couleurs. L'outil permet de basculer entre trois types distincts:

  • Linéaire: Ce mode mélange les couleurs le long d'une ligne droite. La direction de cette ligne est définie par un angle numérique exprimé en degrés (°). La valeur 0° oriente le dégradé vers le haut, tandis que la valeur 90° l'oriente vers la droite.
  • Radial: Ce type diffuse les couleurs vers l'extérieur à partir d'un point central. Contrairement au mode linéaire, le dégradé radial n'utilise pas d'angle de direction. À la place, la diffusion se règle via une forme géométrique, à choisir entre une Ellipse ou un Cercle.
  • Conique: Ce modèle balaie les couleurs autour d'un point central à la manière d'une roue chromatique. L'orientation de départ de ce balayage se règle également à l'aide d'un curseur d'angle en degrés (°).

Configuration et rôle des arrêts de couleur

Un arrêt de couleur désigne une valeur chromatique précise ancrée à un emplacement donné le long du dégradé. Le point de départ du dégradé correspond à la position 0 %, tandis que le point d'arrivée se situe à 100 %.

Le générateur applique les règles de configuration suivantes:

  • Configuration initiale: Par défaut, le dégradé commence avec deux arrêts de couleur positionnés aux extrémités: la couleur #6366f1 à 0 % et la couleur #ec4899 à 100 %.
  • Ajout d'arrêts: L'utilisateur peut ajouter des points intermédiaires pour enrichir la transition. Tout nouvel arrêt de couleur ajouté prend automatiquement la position par défaut de 50 %.
  • Limite maximale: Il est possible de configurer jusqu'à huit arrêts de couleur au total. Lorsque cette limite de huit arrêts est atteinte, le bouton "Ajouter un arrêt" est désactivé.
  • Suppression: Chaque point de couleur peut être retiré individuellement à l'aide de l'option "Supprimer l’arrêt".

Intégration du code CSS dans le design web

Les dégradés générés servent principalement à concevoir des arrière-plans pour des interfaces web. L'outil simplifie l'exportation du code grâce à une zone dédiée affichant le code CSS à copier.

En cliquant sur le bouton « Copier le CSS », le code est envoyé dans le presse-papiers et l'état du bouton se transforme temporairement en « Copié » pour confirmer l'action. Le code obtenu s'intègre directement dans les propriétés de style d'un élément HTML pour structurer l'identité visuelle d'un site.

Traitement des données et confidentialité

Le fonctionnement du Générateur de Dégradés CSS repose exclusivement sur des technologies exécutées côté client. Chaque dégradé est calculé dans votre navigateur. Aucune des configurations, des couleurs choisies ou des données saisies dans l'outil n'est envoyée à BroBroGo.

FAQ

Quelle est la différence entre un dégradé linéaire, radial et conique? Un dégradé linéaire fond les couleurs le long d’une ligne droite que vous orientez avec un angle. Un dégradé radial les diffuse depuis le centre vers l’extérieur, en cercle ou en ellipse. Un dégradé conique les fait tourner autour du centre, comme une roue chromatique.

Que sont les arrêts de couleur? Chaque arrêt de couleur est une couleur fixée à une position du dégradé: 0 % au début, 100 % à la fin. Déplacez un arrêt pour changer l’endroit où sa couleur domine, ou ajoutez-en d’autres pour un fondu plus riche. Vous pouvez en placer jusqu’à huit.

Comment régler la direction? Pour un dégradé linéaire ou conique, le curseur d’angle définit la direction: 0° vers le haut, 90° vers la droite. Le dégradé radial n’a pas d’angle; choisissez plutôt une forme de cercle ou d’ellipse pour modifier sa diffusion.

Générateur de Cubic Bezier CSSFaites glisser les deux poignées pour dessiner une courbe d’easing, regardez un point la parcourir face à un autre à vitesse constante, et copiez la valeur cubic-bezier().Générateur d’Ombres CSSAjustez des curseurs pour façonner un box-shadow, empilez plusieurs couches pour la profondeur, et copiez le CSS obtenu aussitôt.Générateur de Border RadiusArrondissez chaque coin avec des curseurs, façonnez des formes organiques « blob » avec le mode elliptique, et copiez le CSS aussitôt.Générateur de Flexbox CSSConfigurez un conteneur flex et ses éléments avec des contrôles visuels, voyez la mise en page réagir en direct, puis copiez le CSS en un clic.Générateur de Grid CSSDéfinissez vos colonnes et vos lignes, faites glisser sur les cellules pour placer des éléments, et copiez le CSS de la grille avec son HTML en un clic.Calculateur de CSS clamp()Définissez une taille pour les petits écrans et une pour les grands, et obtenez une valeur clamp() fluide qui varie en douceur entre les deux — pour les tailles de police, le padding, les marges ou les gaps.Convertisseur de couleursConvertissez des couleurs entre HEX, RGB, HSL, HSV, CMYK et LAB : modifiez un champ et les autres se mettent à jour aussitôt.Formateur et Minificateur CSSRéindentez du CSS embrouillé pour le lire, ou minifiez-le pour le publier, avec un mode sûr qui ne réordonne jamais vos règles.Vérificateur de contrasteSaisissez une couleur de texte et de fond pour voir le rapport de contraste WCAG et les niveaux AA et AAA validés.