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

[Canonical HTML page](https://gradiently.design/fr/guide/css-gradient-generator)

La plupart du code de dégradé généré se colle sans souci et date un peu. Apprenez les quatre parties d’un dégradé et vous l’écrirez plus vite que vous ne trouverez un générateur, puis l’affinerez comme aucun curseur ne le permet.

## The short version

- Un générateur de dégradé CSS transforme vos choix de couleurs et d’angle en une valeur background-image à coller dans une feuille de style.
- Tout dégradé CSS a quatre parties : un type, une direction ou une position, un espace colorimétrique d’interpolation facultatif et une liste d’arrêts de couleur.
- Les anciens générateurs produisent encore des préfixes navigateur et d’anciens filtres pour Internet Explorer, dont les navigateurs modernes n’ont pas besoin.
- Ajouter un troisième arrêt, un espace d’interpolation comme oklch ou un second calque améliore en général le code généré plus que changer les couleurs.
- Stocker un dégradé fini dans une propriété personnalisée le rend réutilisable sur tout un site et facile à modifier en un seul endroit.

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

```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); }
```

Tout ce que contrôlent les curseurs d’un générateur correspond à l’une de ces quatre parties.

| Partie | Options | Valeur par défaut si omise |
| --- | --- | --- |
| Type | `linear`, `radial`, `conic`, plus leurs versions `repeating` | Aucune, vous devez choisir |
| Direction ou position | `160deg`, `to top right`, `circle at 80% 20%`, `from 90deg` | De haut en bas ; ellipse centrée ; depuis 0deg |
| Espace colorimétrique | `in oklab`, `in oklch`, `in srgb` et d’autres | sRGB pour les couleurs hexadécimales |
| Arrêts | N’importe quelles couleurs, avec positions facultatives en pourcentage ou en longueur | Répartis régulièrement de 0 % à 100 % |

Les valeurs par défaut expliquent pourquoi tant de dégradés générés se ressemblent : deux arrêts, répartis régulièrement, mélangés en sRGB.

Chaque type a son propre guide : [les dégradés linéaires](https://gradiently.design/fr/guide/css-linear-gradient), [les dégradés radiaux](https://gradiently.design/fr/guide/css-radial-gradient) et [les dégradés coniques](https://gradiently.design/fr/guide/css-conic-gradient).

## 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.

- Crépuscule, trois arrêts: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`
- Verre marin: `linear-gradient(135deg, #ecfeff 0%, #99f6e4 50%, #2dd4bf 100%)`
- Braise dans le coin: `radial-gradient(circle at 85% 15%, #fb923c 0%, #9a3412 35%, #1c0a05 75%)`
- Papier doux: `linear-gradient(180deg, #fdf6ec 0%, #f5e6d3 100%)`
- Vert boréal: `radial-gradient(ellipse at 30% 70%, #34d399 0%, #0f766e 40%, #042f2e 80%)`
- Du violet à l’orange par le rose: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

Le dernier n’a que deux arrêts, mais le mélange en oklch fait passer la teinte par un rose vif, là où le sRGB donne un mauve plus terne. Les navigateurs sans prise en charge des espaces colorimétriques n’affichent alors aucun dégradé : déclarez d’abord un dégradé simple.

## 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.

### Code ancien typique

- `background: #1e1b4b;` puis trois copies préfixées
- `-webkit-linear-gradient(left, ...)` avec les anciennes règles d’angle
- `filter: progid:DXImageTransform...` pour Internet Explorer
- `rgba(30, 27, 75, 1)` pour des couleurs entièrement opaques

### Code moderne et propre

- Une seule `background-color` unie en repli
- Un seul `linear-gradient()` sans préfixe
- Aucun filtre
- Hexadécimal court, ou `rgb(30 27 75 / 0.5)` seulement quand l’alpha compte

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

Tout ce que le code d’un ancien générateur essayait de dire, en deux lignes.

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. **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. **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](https://gradiently.design/fr/guide/gradient-interpolation) montre la différence.
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. **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](https://gradiently.design/fr/guide/css-mesh-gradient) vont plus loin.
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](https://gradiently.design/fr/guide/css-noise-texture).

```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%);
}
```

Trois calques écrits à la main : une lumière rose en haut à droite, une nappe indigo en bas à gauche, une base sombre. Le premier calque listé est au-dessus.

## 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](https://gradiently.design/fr/guide/css-custom-properties-theming) montre comment changer de token de dégradé selon la marque ou le mode.

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

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

Une seule définition, utilisée partout. Si les couleurs changent, rien d’autre dans la feuille de style n’a à changer.

## 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](https://gradiently.design/fr/guide/gradient-generator).

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.

## FAQ

### Qu’est-ce qu’un générateur de dégradé CSS ?

Un outil qui permet de choisir visuellement couleurs, angle et type, puis produit une valeur `linear-gradient()`, `radial-gradient()` ou `conic-gradient()` à coller dans le CSS.

### Ai-je encore besoin des préfixes -webkit- pour les dégradés CSS ?

Non. Les dégradés sans préfixe fonctionnent dans tous les navigateurs actuels. Retirez du code généré les copies préfixées et les anciens filtres pour Internet Explorer.

### Comment écrire un dégradé CSS à la main ?

Choisissez un type, une direction et au moins deux arrêts de couleur : `linear-gradient(160deg, #1e1b4b, #6d28d9 55%, #f472b6)`.

### Pourquoi mon dégradé généré paraît-il boueux au milieu ?

Il se mélange en sRGB, qui grise l’espace entre des couleurs éloignées. Ajoutez `in oklab` après l’angle, ou ajoutez un arrêt intermédiaire dans une couleur plus franche.

### Comment réutiliser un dégradé sur tout un site ?

Stockez tout le dégradé dans une propriété personnalisée comme `--gradient-brand` et utilisez `var(--gradient-brand)` partout où vous en avez besoin.