FrançaisFR

Générateur de dégradé CSS – linéaire, radial, conique

Choisissez vos arrêts de couleur et l’angle : le code CSS du dégradé est prêt à copier.

Vos textes et fichiers restent dans votre navigateur : rien n’est envoyé à un serveur.

Arrêts de couleur

Cliquez sur un endroit libre de la barre pour ajouter un arrêt, ou faites glisser une poignée pour le déplacer.

Code CSS

La ligne background-color est une couleur moyenne pour les environnements qui n’affichent pas les dégradés.

Mode d’emploi

  1. Choisissez un type – linéaire, radial ou conique – puis réglez l’angle ou le centre.
  2. Ajoutez des arrêts en cliquant sur la barre ou avec « Ajouter un arrêt ». Faites glisser une poignée ou saisissez un pourcentage pour déplacer un arrêt.
  3. Choisissez la couleur de chaque arrêt avec le sélecteur, ou tapez un code comme #rrggbbaa pour ajouter de la transparence.
  4. Copiez le code CSS et collez-le dans votre feuille de style. « Aléatoire » vous fait découvrir de nouvelles combinaisons.

Questions fréquentes

Quelle différence entre linéaire, radial et conique ?

Le dégradé linéaire mélange les couleurs le long d’une ligne droite, le radial les diffuse depuis un centre vers l’extérieur, et le conique les fait tourner dans le sens des aiguilles d’une montre autour du centre. Le conique convient bien aux camemberts et aux roues chromatiques.

Dans quelle direction va 0deg ?

Avec linear-gradient, 0deg va du bas vers le haut et 90deg de gauche à droite. Un dégradé conique commence à 0deg, c’est-à-dire à midi sur un cadran.

Les dégradés fonctionnent-ils sur les anciens navigateurs ?

Les dégradés linéaires et radiaux fonctionnent sur presque tous les navigateurs, les coniques sur les navigateurs sortis depuis 2020 environ. Là où le dégradé ne peut pas s’afficher, la couleur background-color prend le relais.

Outils similaires

Sélecteur de couleurHEX, RGB, HSL et CMJN d’un coup d’œilFiltres CSSFlou, luminosité, gris et plusNuancier pour Tailwind CSSUne couleur, une échelle de 50 à 950Générateur d’ASCII artTexte et photos en caractères

Tous les outils