Générateur de dégradé CSS
Façonnez un dégradé visuellement, puis copiez un CSS qui fonctionne dans tous les navigateurs modernes.
Scellé sur cet appareil
Fonctionne dans votre navigateur. Rien n’est envoyé.
Scellé
Aperçu
Points de couleur
Faites glisser les points, ou sélectionnez-en un et utilisez les flèches. Cliquez sur la barre pour ajouter un point.
Réglages
OKLCH et OKLab évitent la zone grise et terne au milieu de certains dégradés. Une version standard est incluse pour les navigateurs plus anciens.
Code CSS
Comment ça marche
-
Choisissez un type
Choisissez un dégradé linéaire, radial ou conique, ou partez d’un préréglage, puis réglez son angle ou son centre.
-
Modifiez les couleurs
Faites glisser les points de couleur le long de la barre, cliquez sur la barre pour en ajouter, et changez la couleur et la position de chacun.
-
Copiez le CSS
Copiez le code généré et collez-le dans votre feuille de style comme arrière-plan.
Questions fréquentes
Quelle différence entre un dégradé linéaire, radial et conique ?
Un dégradé linéaire change de couleur le long d’une ligne droite, selon l’angle choisi. Un dégradé radial se diffuse depuis un point central, en cercle ou en ellipse. Un dégradé conique tourne autour d’un point central, comme les aiguilles d’une montre, ce qui est pratique pour les cercles chromatiques et les graphiques en secteurs.
Le CSS généré fonctionne-t-il dans tous les navigateurs ?
Les dégradés linéaires, radiaux et coniques fonctionnent dans tous les navigateurs actuels. Si vous choisissez le mélange OKLCH ou OKLab, le code inclut d’abord une ligne standard, pour que les anciens navigateurs affichent quand même un dégradé.
Pourquoi mon dégradé paraît-il gris au milieu ?
Mélanger deux couleurs très différentes dans l’espace sRGB standard passe souvent par un gris boueux. Passez le mélange en OKLCH ou en OKLab : les couleurs sont mélangées comme l’œil les perçoit, et le milieu reste lumineux.
Puis-je utiliser des couleurs transparentes ?
Oui. Tapez une couleur avec transparence, comme rgb(52 66 217 / 0.4) ou #3442d966, dans le champ couleur d’un point. C’est idéal pour les calques posés sur des images.
Combien de points de couleur puis-je ajouter ?
Autant qu’il vous en faut. Chaque point se déplace à la souris, au doigt ou avec les flèches, et peut être supprimé tant qu’il en reste deux.