Générateur de dégradé CSS : écrire ses dégradés à la main ou non

Un générateur de dégradé CSS vous donne une valeur de dégradé à coller, comme linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%), une fois les couleurs et l’angle choisis. C’est un bon point de départ. Mais un dégradé CSS est assez court pour s’écrire à la main en moins d’une minute, et c’est dans le code écrit à la main que se trouvent les améliorations : un troisième arrêt, un meilleur espace colorimétrique, un second calque. Cette page montre comment lire le code d’un générateur, le nettoyer et écrire le vôtre.

Les quatre parties de tout dégradé CSS

.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }

Chaque type a son propre guide : les dégradés linéaires, les dégradés radiaux et les dégradés coniques.

Des recettes de dégradés à copier

Celles-ci sont écrites à la main plutôt que générées, et chacune utilise une idée qu’un générateur basique propose rarement : une lumière décentrée, trois arrêts au lieu de deux, ou un espace colorimétrique choisi. Cliquez sur l’une d’elles pour la copier.

Comment nettoyer le code d’un générateur

Collez le code d’un ancien générateur et vous risquez d’obtenir cinq lignes là où une suffit. Les dégradés préfixés et le filtre pour Internet Explorer sont inutiles depuis des années ; ils alourdissent le code et, dans le cas de l’ancienne syntaxe -webkit-, utilisent un autre système d’angles qui déroute quiconque modifie le code ensuite.

.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

Votre navigateur est aussi un générateur honorable. Ouvrez les outils de développement, sélectionnez l’élément et cliquez sur n’importe quelle pastille de couleur du dégradé dans le panneau Styles : vous obtenez un sélecteur de couleur pour cet arrêt, et vous pouvez modifier angles et pourcentages sur place pendant que la page se met à jour en direct. Recopiez ensuite la valeur finale dans votre feuille de style. Pour régler un dégradé face au vrai contenu, c’est mieux que n’importe quel outil séparé, car vous le voyez derrière votre vrai titre.

Cinq retouches qui battent n’importe quel curseur

1. 1

   Ajoutez un arrêt intermédiaire

   Deux arrêts donnent une rampe droite. Une troisième couleur vers 50 à 60 % ajoute de la profondeur et vous laisse décider où se fait la transition.

2. 2

   Choisissez l’espace colorimétrique

   Ajoutez in oklab pour garder propres les fondus entre couleurs éloignées, ou in oklch pour laisser voyager la teinte. L’interpolation des dégradés montre la différence.

3. 3

   Décentrez la lumière

   Remplacez un dégradé linéaire par radial-gradient(circle at 80% 20%, ...) pour que la couleur la plus vive vienne d’un coin, comme une source de lumière.

4. 4

   Superposez deux ou trois dégradés

   Séparez plusieurs valeurs par des virgules dans background-image. Des halos radiaux sur une base linéaire paraissent bien plus riches qu’un seul dégradé ; les dégradés maillés CSS vont plus loin.

5. 5

   Ajoutez un peu de grain

   Une légère couche de bruit masque les effets de bandes sur les grands dégradés sombres. Le code se trouve dans la texture de bruit CSS.

.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

Transformer un dégradé en token réutilisable

Une fois le dégradé réussi, donnez-lui un nom. Une propriété personnalisée contient toute la valeur : boutons, bannières et en-tête peuvent la partager, et une refonte ne touche qu’une ligne. Les variables CSS pour les thèmes montre comment changer de token de dégradé selon la marque ou le mode.

:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }

Quand un générateur n’est pas le bon outil

Les générateurs et le CSS écrit à la main partagent la même limite : le résultat est une liste d’arrêts que n’importe qui peut lire dans votre feuille de style et réutiliser. Pour les détails d’interface, c’est très bien. Pour le fond qui vous rend reconnaissable, sur votre site et dans chaque publication, vous voudrez peut-être quelque chose de plus riche et de plus difficile à copier. Les conseils plus généraux se trouvent dans comment utiliser un générateur de dégradés.

Les Marks de Gradiently vont au-delà de ce que le CSS peut décrire : matières superposées, lumière, grain et mouvement, rendus en direct à toutes les tailles, avec exactement un propriétaire à la fois. Vous pouvez créer gratuitement avec n’importe quel Mark non réservé et chercher dans le Marché par mots de couleur pour en trouver un proche du dégradé que vous vouliez écrire.