ToolsMaxxing
Français
EnglishEspañolPortuguêsBahasa Indonesiaहिन्दीবাংলাРусскийTiếng ViệtFrançaisDeutschTürkçeالعربية

Générateur de dégradé CSS

Concevez un dégradé linéaire, radial ou conique et copiez le CSS.

Points de couleur
0%
100%

Vos fichiers restent sur votre appareil

Comment ça marche

  1. 1Choisissez linéaire, radial ou conique.
  2. 2Réglez l'angle, ou la forme pour le radial.
  3. 3Choisissez les couleurs et faites glisser chaque point à sa position. Ajoutez des points avec Ajouter un point de couleur.
  4. 4Copiez le CSS et collez-le dans votre feuille de style.

À quoi servent les options

Linéaire
Les couleurs se fondent le long d'une ligne droite. L'angle définit la direction : 0 degré va vers le haut, 90 vers la droite, 180 vers le bas.
Radial
Les couleurs rayonnent depuis le centre, en cercle ou en ellipse.
Conique
Les couleurs balaient autour du centre comme un cercle chromatique ou un camembert. L'angle fait pivoter le départ.
Points de couleur
Chaque point est une couleur à une position de 0 à 100 pour cent. Jusqu'à huit.

Confidentialité

Tout s'exécute dans votre navigateur. Rien de ce que vous saisissez n'est envoyé à un serveur.

Questions fréquentes

Quels navigateurs prennent en charge ces dégradés ?

Les dégradés linéaires et radiaux fonctionnent dans tous les navigateurs actuels. Les dégradés coniques fonctionnent dans toutes les versions actuelles de Chrome, Edge, Firefox et Safari.

Comment obtenir un bord net au lieu d'un fondu ?

Placez deux points à la même position, par exemple rouge à 50 % et bleu à 50 %. Il n'y a aucune distance de fondu entre eux, donc le changement est net.

Puis-je l'utiliser comme couleur de texte ou de bordure ?

Oui. Utilisez la même valeur dans background-image, avec background-clip: text pour le texte, ou border-image pour les bordures.

Pourquoi la page affiche-t-elle une couleur différente de celle que j'ai choisie ?

Le sélecteur de couleur utilise des valeurs hex sRVB. Les écrans à large gamme peuvent les afficher légèrement différemment, mais les valeurs CSS sont exactes.

Comment ajouter de la transparence ?

Cet outil produit des couleurs hex pleines. Modifiez le code et remplacez une couleur par un hex à huit chiffres comme #4f46e580, ou par rgba().

Outils associés