Générateur de dégradé CSS

Qu’est-ce qu’un dégradé CSS ?

Un dégradé CSS est une image générée par le navigateur qui fait la transition entre deux couleurs ou plus. Comme il s’agit d’une <image>, on l’utilise avec background, background-image, border-image ou mask-image, et non avec background-color. Les dégradés ne nécessitent aucune requête HTTP, restent nets quelle que soit leur taille et peuvent être animés ou superposés.

Dégradés linéaires, radiaux et coniques

Dans un dégradé linéaire, 0deg pointe vers le haut et 90deg vers la droite (équivalent à to right). Pour un dégradé conique, les angles partent du haut et tournent dans le sens horaire.

Arrêts de couleur et bords nets

Chaque arrêt correspond à une couleur et, éventuellement, à une position. Lorsque deux arrêts partagent la même position, la transition devient un bord net : c’est ainsi que l’on crée des rayures ou le préréglage Pie chart : #4f46e5 0% 40%, #22c55e 40% 75%. Pour faire disparaître progressivement un contenu dans la page, terminez par une version transparente de la même couleur (par exemple #00000000), ce qui évite une bande grise peu esthétique.

Dégradés plus doux avec OKLab et OKLCH

Par défaut, les navigateurs interpolent les couleurs en sRGB : le passage du bleu au jaune traverse donc un gris terne. CSS Color 4 permet de choisir l’espace colorimétrique : linear-gradient(90deg in oklab, blue, yellow) reste lumineux et homogène, tandis que in oklch parcourt la roue des teintes. Le générateur produit d’abord une déclaration sRGB classique, puis la version interpolée. Ainsi, les navigateurs qui ne comprennent pas la syntaxe ignorent simplement la dernière ligne.

Utiliser les dégradés dans Webflow

Le panneau Style de Webflow intègre des éditeurs de dégradés linéaires et radiaux sous Backgrounds : reprenez-y l’angle et les couleurs des arrêts depuis cet outil. Pour ce que le panneau ne propose pas, comme les dégradés coniques ou l’interpolation in oklch, collez le CSS dans un bloc <style> d’un élément Embed ou dans le code personnalisé de la page, puis ciblez votre classe. Besoin d’ombres assorties ? Essayez le Générateur de box-shadow, ou vérifiez la lisibilité d’un texte posé sur votre dégradé avec le Vérificateur de contraste.

Aussi recherché comme : dégradé css, linear-gradient, radial-gradient, conic-gradient, arrêts de couleur, générateur de gradient css, dégradé oklch, dégradé webflow.

Outils complémentaires : Générateur de dégradé CSS

• Générateur de motifs SVG — Donnez une texture discrète à vos sections et cartes avec des motifs SVG sans couture : points, grilles, lignes diagonales, zigzags, vagues, croix, damiers, cercles, triangles et bien d'autres.
• Convertisseur de couleurs — Collez n'importe quelle couleur CSS — HEX, rgb(), hsl(), hwb(), oklch() ou un nom comme tomato — et obtenez instantanément tous les autres formats, ainsi qu'une palette 50–950 prête à l'emploi.
• Convertisseur SVG vers CSS — Collez un SVG pour obtenir une data URI compacte encodée en URL, ainsi que les règles CSS prêtes à l’emploi background-image et mask-image recolorable.
• Générateur d’images OG — Créez en quelques secondes une image d'aperçu de lien soignée pour Facebook, LinkedIn, X, Slack et WhatsApp : choisissez un modèle, saisissez votre titre, ajoutez un logo, puis téléchargez le fichier PNG et les balises méta correspondantes.