Trois types de dégradé CSS, un aperçu et du code prêt à copier
Réglé à la main, un dégradé CSS tient en une ligne, mais cela demande des essais. Ici, l’aperçu change à chaque modification et le code se met à jour avec lui. Le générateur de dégradé CSS écrit linear-gradient(), radial-gradient() ou conic-gradient(), avec le préfixe repeating- si vous activez la répétition.
Les deux zones de code
La première zone contient une ligne, background: ...;. La seconde en contient deux : un background-color égal au premier point, utilisé comme couleur de repli, puis le background-image avec le dégradé. Les couleurs opaques sont écrites en #rrggbb. Avec un alpha inférieur à 100, elles deviennent rgb(0 0 255 / 50%). Pour les dégradés radiaux et coniques, le centre s’écrit at 50% 50% sans taille, donc farthest-corner s’applique.
Régler un dégradé en cinq étapes
- Choisissez Linéaire, Radial ou Conique. Le linéaire demande un angle de 0 à 360 degrés, le radial un cercle ou une ellipse et un centre, le conique un angle de départ et un centre.
- Modifiez les points de couleur : sélecteur, champ hexadécimal, position en pourcentage et alpha de 0 à 100.
- Les flèches déplacent un point, la croix le supprime, Ajouter un point en ajoute un à la fin.
- Essayez Répartir régulièrement ou Inverser les points, ou chargez l’un des six préréglages.
- Cliquez sur Copier au-dessus de la zone voulue.
Arêtes vives, rayures et points dans le désordre
Deux points à la même position ne se fondent pas : ils coupent net. Le préréglage Rayures s’en sert, avec des bandes de 10 % qui se répètent parce que le dernier point est à 20 %.
L’outil ne trie jamais les points. Si un point précède un point antérieur, le navigateur le ramène à la position du précédent. Les positions sont limitées à 0–100.
Ce que l’outil ne fait pas, et ce qui reste chez vous
Seules les couleurs hexadécimales passent (#rgb ou #rrggbb), pas les noms ni hsl(). Il y a une seule couche de dégradé, pas de point médian et pas de taille radiale personnalisée. Tout se passe dans votre navigateur : modifier ou copier n’envoie aucune requête, rien n’est enregistré et un rechargement rétablit le dégradé de départ. Copier écrit dans le presse-papiers ; il n’y a pas de téléchargement.
Foire aux questions (FAQ)
rgb(r g b / 50%). L’aperçu repose sur un damier pour montrer la transparence.