Générateur de dégradé CSS – Dégradés linéaires, radiaux et coniques

Comment utiliser : Générateur de dégradé CSS

1Choisissez un type de dégradé — Linéaire, Radial ou Conique — ou partez d'un préréglage.

2Sélectionnez les couleurs des points d'arrêt et faites glisser les curseurs pour définir leur position.

3Définissez l'angle (ou la forme pour les dégradés radiaux) et ajoutez jusqu'à huit points d'arrêt.

4Copiez le code CSS et collez-le dans votre feuille de style.

Créer des dégradés CSS visuellement

Les dégradés ajoutent profondeur et couleur à vos boutons, sections hero, cartes et arrière-plans sans aucune image. Mais les coder à la main oblige à deviner les angles et pourcentages, et à recharger la page sans cesse. Ce générateur de dégradé CSS vous permet de créer votre dégradé visuellement avec un aperçu en temps réel. Il génère un code CSS propre, prêt à copier et compatible avec tous les navigateurs modernes.

Fonctionnalités

Trois types de dégradés : linéaire, radial (cercle ou ellipse) et conique.
Jusqu'à huit points de couleur ajustables par glisser-déposer.
Curseur d'angle pour les dégradés linéaires et coniques.
Préréglages et bouton aléatoire pour trouver l'inspiration rapidement.
Couleur unie de secours incluse dans le CSS.
Copie du code en un clic.

Utilisation du CSS

Collez le code dans la règle CSS de l'élément que vous souhaitez styliser :

.hero {
  background: #0ea5e9;
  background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}

Les dégradés sont considérés comme des images en CSS. Vous pouvez donc aussi les utiliser dans background-image, superposer plusieurs dégradés en les séparant par des virgules, ou les combiner avec une photo : background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); assombrit une image pour que le texte blanc superposé reste lisible.

Conseils de design

Restez subtil. Deux teintes voisines (du bleu au violet, de l'orange au rose) offrent un rendu plus doux et moderne que des couleurs opposées.
Vérifiez le contraste. Si du texte se trouve sur le dégradé, assurez-vous qu'il soit lisible aux deux extrémités — testez les couleurs avec le Convertisseur de couleurs, qui indique les ratios de contraste.
Extrayez les couleurs d'une image de marque avec le Sélecteur de couleur d'image.
Ajoutez de la profondeur à vos cartes et boutons avec le Générateur de box-shadow.

Questions fréquentes

Pourquoi y a-t-il deux lignes background dans le CSS ?

La première ligne définit une couleur unie de secours pour les rares navigateurs ou clients de messagerie qui ne supportent pas les dégradés. Les navigateurs compatibles utilisent la deuxième ligne, qui écrase la première.

Que signifient les angles dans un dégradé linéaire ?

0° va de bas en haut, 90° de gauche à droite, 180° de haut en bas et 270° de droite à gauche. Les angles intermédiaires forment des diagonales — 135° va d'en haut à gauche vers en bas à droite.

Quelle est la différence entre les dégradés linéaires, radiaux et coniques ?

Un dégradé linéaire change de couleur le long d'une ligne droite. Un dégradé radial se diffuse depuis le centre en cercle ou en ellipse. Un dégradé conique tourne autour du centre comme une roue chromatique ou un diagramme circulaire.

Dois-je utiliser des préfixes vendeurs comme -webkit- ?

Non. Les dégradés linéaires et radiaux fonctionnent sans préfixe sur tous les navigateurs actuels, et les dégradés coniques sont supportés par tous les navigateurs modernes sortis depuis 2020.

Comment créer une transition nette au lieu d'un fondu ?

Placez deux points d'arrêt à la même position avec des couleurs différentes. Par exemple, du rouge à 50% et du bleu à 50% créent une séparation nette au milieu.