Utilore

Générateur de dégradé CSS

Déplacez les curseurs et regardez le panneau du haut changer avec eux. Quand le résultat vous convient, copiez la ligne et collez-la dans votre feuille de style : rien d’autre n’est nécessaire.

L’angle s’applique aux dégradés linéaires et coniques ; le radial part du centre.

Points de couleur

    Comment faire

    1. Choisissez le type : le linéaire suit une droite, le radial part du centre, le conique tourne autour.
    2. Réglez l’angle et déplacez les points là où les couleurs doivent se rejoindre.
    3. Ajoutez des points si deux couleurs ne suffisent pas, ou appuyez sur « Au hasard ».
    4. Copiez la ligne CSS sous l’aperçu.

    Bon à savoir

    Pourquoi l’aperçu repose sur un damier

    Un dégradé se termine souvent par une couleur transparente, et sur un panneau blanc uni cela ressemble exactement à une couleur opaque. Le damier transparaît partout où la couleur n’est pas pleine : ce que vous réglez est donc ce que vous voyez — une habitude reprise des éditeurs d’images précisément pour cette raison.

    Les points sont triés avant l’écriture du code

    CSS ne réordonne pas les points de couleur : un point à 70 % écrit avant un point à 30 % force le navigateur à bloquer le second, et le dégradé perd une couleur en silence. L’outil trie les points par position au moment de construire la ligne, si bien que faire passer un curseur devant son voisin ne casse jamais le résultat.

    Questions fréquentes

    Quelle différence entre les trois types ?

    Le dégradé linéaire suit une droite et accepte un angle : 90deg va de gauche à droite, 180deg de haut en bas. Le radial se propage en cercles depuis le centre, ce qui convient aux halos et aux projecteurs. Le conique tourne autour d’un point comme une aiguille d’horloge, et c’est de lui que sont faits les camemberts et les roues chromatiques.

    Comment faire un dégradé avec de la transparence ?

    Choisissez une couleur et baissez son opacité dans le sélecteur si votre navigateur propose l’alpha, ou modifiez la ligne copiée à la main : rgba(31, 95, 214, 0) fonctionne comme point de couleur au même titre qu’une couleur pleine. Un fondu vers le transparent est plus utile qu’un fondu vers le blanc — il marche sur n’importe quel fond.

    Puis-je m’en servir comme couleur de texte ?

    Oui, avec deux lignes de plus : mettez le dégradé sur background-image, puis ajoutez background-clip: text et color: transparent. Le texte garde sa forme et le dégradé se voit à travers les lettres.

    Pourquoi le même angle rend-il différemment en mode radial ?

    Il ne s’y applique pas du tout. Un dégradé radial part du centre et n’a pas de direction : l’angle reste donc pour les modes linéaire et conique, où il décide du point de départ du balayage.

    Outils similaires