Générateur de dégradés CSS gratuit

Composez un dégradé linéaire, radial ou conique, réglez ses points de couleur au pixel près, puis copiez le CSS prêt à l’emploi. Tout se calcule dans votre navigateur.

Générateur de dégradés CSS

Format

Code généréMise à jour en direct

CSS

background: linear-gradient(135deg, #f97316 0%, #af002d 50%, #319197 100%);

Voir plus d’options

1. Positionnez vos couleurs

Faites glisser un point pour ajuster la transition.

2. Réglez le dégradé

Angle du dégradé, 135 degrés. Flèches pour ajuster, Maj et flèches pour un pas de quinze.

Angle

0° pointe vers le haut, 90° vers la droite.

4. Presets

3. Points de couleur

PositionOpacité

Un point de plus crée une transition supplémentaire avec ses deux voisins.

Options avancées

Accords chromatiques, grain, historique de session et nom de variable CSS.

Accords depuis l’atelier de couleurs

Construit un dégradé à partir du point actif (#fa7516) et d’un accord chromatique.

Ouvrir #fa7516 dans l’atelier de couleurs

Nom de variable

Devient --gradient-hero dans le CSS.

3 points, dégradé linéaire.

À quoi servent ces chiffres ?

linear-gradient()Progression le long d’une droite, angle réglable de 0 à 360 degrés.
radial-gradient()Progression depuis un centre, en cercle ou en ellipse.
conic-gradient()Rotation des couleurs autour d’un centre, comme une aiguille.
Point de couleur (stop)Couleur et position en pourcentage le long du dégradé.

Voir les formules

Outils associés

Tous les outils gratuits

Bon à savoir

Les résultats se recalculent à chaque frappe. Vous pouvez charger un exemple pour comprendre le fonctionnement, puis remplacer les valeurs par les vôtres.

Formules et hypothèses

Rien n’est caché : voici les calculs.

Chaque indicateur affiché plus haut correspond exactement à l’une de ces formules. Tous les montants sont exprimés hors taxes.

linear-gradient()

Progression le long d’une droite, angle réglable de 0 à 360 degrés.

linear-gradient(angle,couleur position, ...)

radial-gradient()

Progression depuis un centre, en cercle ou en ellipse.

radial-gradient(forme at centre,couleur position, ...)

conic-gradient()

Rotation des couleurs autour d’un centre, comme une aiguille.

conic-gradient(from angle at centre,couleur position, ...)

Point de couleur (stop)

Couleur et position en pourcentage le long du dégradé.

Minimum de deux points,position de 0 à 100 %

Linéaire, radial ou conique : trois lignes de dégradé, pas un seul effet

Un dégradé linéaire fait progresser les couleurs le long d’une droite dont l’angle se règle librement : c’est le plus courant, pour un fond de section ou un bouton. Un dégradé radial part d’un centre et s’étend en cercle ou en ellipse, utile pour un effet de lumière ou de projecteur. Un dégradé conique tourne autour d’un centre comme une aiguille de montre, ce qui le rend adapté à une roue chromatique ou à un indicateur circulaire, deux usages que les deux premiers types ne permettent pas.

Le choix du type dépend donc de l’effet recherché, jamais d’une préférence esthétique isolée : un radial mal utilisé sur un grand bandeau plat produit souvent un halo inattendu, là où un linéaire suffirait et resterait plus sobre.

Un point de couleur (stop) porte deux informations, pas une seule

Chaque point du dégradé fixe une couleur et une position en pourcentage le long de la ligne, du cercle ou du cône. Deux points sont le minimum technique pour qu’un dégradé existe ; au-delà, chaque point ajouté crée une transition supplémentaire entre lui et ses voisins immédiats, jamais avec l’ensemble du dégradé.

Resserrer deux points proches force une transition brutale entre eux, un effet parfois recherché pour une bande nette plutôt qu’un fondu. À l’inverse, répartir les points à intervalles réguliers, ce que fait le bouton dédié, produit une progression bien plus régulière à l’œil.

La compatibilité des navigateurs, sans préfixe à ajouter

Les trois fonctions linear-gradient, radial-gradient et conic-gradient sont du CSS standard, reconnu sans préfixe fournisseur par les navigateurs modernes depuis plusieurs années. Le dégradé conique reste la fonction la plus récente des trois ; sur un navigateur ancien encore en usage, il peut ne pas s’afficher alors que les deux autres fonctionnent normalement.

Prévoir une couleur de secours en arrière-plan, avant la propriété du dégradé, reste une pratique saine : un navigateur qui ne comprend pas la fonction ignore la déclaration entière et affiche cette couleur de secours plutôt qu’un fond vide.

Un dégradé de fond n’a pas un contraste unique

Poser du texte sur un dégradé revient à le poser sur plusieurs couleurs différentes selon l’endroit où il tombe : le ratio de contraste calculé à un point précis ne dit rien de sa valeur ailleurs sur la même surface. C’est pourquoi cet outil affiche un plancher et un plafond de contraste plutôt qu’un chiffre unique, et pourquoi le vérificateur de contraste dédié reste le bon endroit pour trancher une zone précise.

Un dégradé très contrasté visuellement peut malgré tout offrir un texte parfaitement lisible s’il reste sombre ou clair de bout en bout : ce n’est pas l’écart entre les couleurs du dégradé qui compte pour la lecture, mais l’écart entre chacune d’elles et la couleur du texte posé dessus.

Questions fréquentes

Ce que l’on nous demande le plus souvent.

Non, pas de façon mesurable. Un dégradé est calculé par le moteur de rendu du navigateur au même titre qu’une couleur unie ; il ne charge aucune image et ne déclenche aucune requête réseau supplémentaire, contrairement à un visuel de fond exporté en PNG.

Les dégradés linéaire et radial fonctionnent depuis longtemps sans préfixe particulier. Le dégradé conique est plus récent : sur un navigateur qui ne le reconnaît pas encore, prévoyez une couleur de fond de secours juste avant la propriété du dégradé dans votre feuille de style.

Non. L’image PNG ou WebP est dessinée localement sur un canevas de votre navigateur, puis proposée au téléchargement directement depuis votre appareil. Aucun fichier ni aucune couleur n’est transmis à Web-Shine à aucun moment de l’export.

Oui, entièrement. Un preset ne fait que remplacer les points de couleur actuels par une composition de départ : une fois chargé, chaque point reste modifiable, déplaçable et supprimable exactement comme un dégradé construit à la main.

Parce qu’un dégradé n’a pas une seule couleur de fond : le texte peut tomber sur sa zone la plus claire ou la plus sombre selon l’endroit où il est posé. La fourchette indique le meilleur et le pire cas ; le vérificateur de contraste dédié permet de trancher un point précis.

Non. Le dégradé, ses points de couleur et l’historique de session se calculent entièrement dans votre navigateur. Rien n’est transmis à Web-Shine ni conservé au-delà de la fermeture de l’onglet, à l’exception du modèle technique éventuel d’un autre outil.

Outils associés