Générateur de Dégradés

Ces trois types de dégradés CSS diffèrent dans la façon dont la couleur se répartit sur un élément. Un dégradé linéaire mélange les couleurs en ligne droite selon un angle que vous réglez de 0 à 360 degrés, ce qui convient aux fonds, boutons et bannières hero. Un dégradé radial fait rayonner la couleur depuis un point central sous forme de cercle ou d'ellipse, créant un effet de projecteur ou de halo. Un dégradé conique fait tourner les couleurs autour d'un point central comme une roue chromatique, idéal pour les camemberts, les loaders et les sélecteurs de couleur. Cet outil propose aussi des dégradés mesh, qui superposent plusieurs dégradés radiaux pour l'effet doux et multidirectionnel courant sur les pages d'atterrissage modernes. Vous pouvez basculer entre les quatre styles dans l'éditeur et voir l'aperçu se mettre à jour instantanément, puis copier le CSS correspondant afin que le design affiché soit exactement celui qui sera livré.

Un point de couleur (color stop) est une couleur unique placée à un endroit précis le long d'un dégradé, et le navigateur effectue un fondu progressif entre deux points consécutifs. Chaque point comporte deux réglages clés : une valeur de couleur et une position, généralement exprimée en pourcentage de 0 à 100 le long de la ligne du dégradé. Deux points donnent un simple fondu à deux couleurs, tandis qu'en ajouter davantage permet de créer des mélanges multicolores, des arcs-en-ciel ou des palettes de marque. Vous pouvez aussi définir l'opacité de chaque point pour créer des fondus transparents qui laissent apparaître ce qui se trouve derrière l'élément. Si vous activez l'interrupteur d'arrêts francs (hard stops), le fondu est totalement désactivé et les points adjacents forment des bandes de couleurs nettes, ce qui est pratique pour les rayures, les drapeaux et les blocs duotones. Dans ce générateur, vous pouvez ajouter autant de points que nécessaire, faire glisser chacun vers une position exacte, et copier le code obtenu en un clic.

En CSS, la direction d'un dégradé linéaire est contrôlée par un angle mesuré en degrés. Zéro degré oriente le fondu vers le haut, 90 degrés le fait aller de gauche à droite, 180 degrés l'oriente vers le bas, et 270 degrés le fait aller de droite à gauche : toute valeur de 0 à 360 vous permet donc de faire pivoter le fondu avec précision. Vous pouvez aussi utiliser des mots-clés de direction comme « to right » ou « to bottom » en CSS brut, mais un angle numérique offre un contrôle plus fin. Dans cet outil, vous ajustez l'angle sur un canevas en direct et voyez le dégradé pivoter immédiatement, sans avoir à deviner quelle valeur correspond au rendu voulu. Pour les styles linéaire et conique, vous pouvez même activer une option d'animation qui fait tourner l'angle en continu pour prévisualiser le mouvement. Une fois le résultat satisfaisant, copiez le code CSS, Tailwind ou styled-components exact pour votre projet.

Oui. Bien que les dégradés CSS soient généralement préférables sous forme de code en direct, car ils restent nets à toute taille et n'ajoutent aucun poids d'image, il est parfois nécessaire d'obtenir un fichier plat. Ce générateur peut exporter votre dégradé en image PNG, JPG ou SVG, ce qui est utile lorsque vous avez besoin d'un visuel de fond pour un outil de design, un diaporama, un visuel pour les réseaux sociaux, ou une plateforme qui n'accepte pas le CSS brut. Le PNG et le JPG donnent une image matricielle de taille fixe, tandis que le SVG conserve le dégradé sous forme de données vectorielles redimensionnables qui restent nettes sur les écrans haute densité. Pour les projets web, en revanche, copier le code CSS, Tailwind, styled-components ou en variables CSS est plus léger et plus flexible, car le navigateur le restitue nativement. Créez votre dégradé sur le canevas, puis choisissez l'export en code ou en image selon la destination souhaitée.

Le banding (effet de bandes) désigne les paliers visibles que l'on observe parfois entre les couleurs, où le fondu ressemble à des rayures plutôt qu'à une transition continue. Cela se produit généralement lorsque deux points de couleur sont très différents en teinte ou en luminosité et que l'écran a une profondeur de couleur limitée, ce qui arrondit les teintes intermédiaires à un petit nombre de valeurs. Pour réduire cet effet, rapprochez vos points de couleur en termes de tons, ajoutez un point intermédiaire entre les deux, ou choisissez des couleurs avec des écarts de luminosité plus faibles. Vérifiez également que vous n'avez pas activé par erreur l'interrupteur d'arrêts francs, qui supprime volontairement le fondu pour créer des bandes nettes. Les dégradés subtils et à faible contraste sont ceux qui présentent le plus de bandes, donc un peu de contraste supplémentaire peut paradoxalement paraître plus lisse. Utilisez l'aperçu en direct de ce générateur pour tester le placement des points, essayez les modes d'aperçu sur bouton ou sur carte pour juger du rendu en contexte, puis copiez le résultat une fois le fondu bien homogène.