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.

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.