Générateur de dégradé CSS en ligne gratuit

Le dégradé CSS est devenu le moyen le plus léger et le plus flexible pour habiller un fond, un bouton ou une carte. Plus besoin d'exporter un PNG depuis un éditeur d'image : le navigateur calcule la transition entre vos couleurs, en vectoriel, en quelques dizaines d'octets. Le générateur de dégradé CSS de Volade produit le code exact — angle, arrêts, position d'origine — pendant que vous composez à l'écran.

linear-gradient : le dégradé directionnel

La fonction linear-gradient() reçoit un angle suivi des arrêts : linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). L'angle 0deg pointe vers le haut, 90deg vers la droite, 180deg vers le bas. Sans angle, le navigateur part du haut vers le bas. C'est la syntaxe la plus utilisée pour les headers, les boutons d'appel à l'action et les bandeaux de section.

radial-gradient : le halo et l'ellipse

La fonction radial-gradient() part d'un point (par défaut le centre) et s'étale en cercle ou en ellipse. La position d'origine se note at X% Y% : radial-gradient(circle at 50% 50%, …). Parfaite pour un effet de halo derrière un titre, un fond de hero qui vise le centre ou une ombre douce synthétique. L'outil expose deux curseurs X et Y pour placer l'origine au pixel près.

conic-gradient : la rotation autour d'un point

La fonction conic-gradient() tourne autour d'un point, comme les aiguilles d'une montre. Elle s'écrit conic-gradient(from 90deg at 50% 50%, …) et permet de créer des anneaux, des jauges circulaires, des bordures colorées ou des effets prisme. Chaque arrêt occupe un secteur angulaire : en plaçant plusieurs couleurs, vous dessinez un camembert CSS sans une seule image.

Les arrêts de couleur (color stops)

Chaque arrêt associe une couleur et une position en pourcentage : #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%. Des positions identiques sur deux couleurs créent une transition nette (bord dur) ; des positions éloignées produisent un fondu progressif. Plus de deux arrêts permettent des palettes multi-couleurs, des bandes ou des simulations de matériaux (métal, nacre, aurore boréale).

Superposer un dégradé et prévoir un repli

Dans le raccourci background, l'ordre compte : le premier plan d'abord. Un voile sombre sur photo s'écrit background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Placez toujours une couleur unie en fallback (background-color) pour les navigateurs très anciens ou pendant le chargement de l'image.

Bonnes pratiques de performance

Un dégradé CSS est recalculé à chaque redimensionnement : restez raisonnable sur le nombre d'arrêts (2 à 5 suffisent dans 90 % des cas) et évitez les superpositions multiples sur de très grandes surfaces sur mobile. Préférez des valeurs hexadécmales ou HSL stables, et figez l'angle dès que le design est validé pour éviter les micro-diffs entre navigateurs.

Des dégradés à la charte Volade

Pour construire une palette cohérente avant de décliner les dégradés, croisez le générateur de palettes et le sélecteur de couleur : repérez les teintes de marque, puis collez-les ici comme arrêts. Le résultat se copie directement dans votre CSS, votre design system ou votre thème — sur ordinateur comme sur mobile, sans compte et sans envoi de données.