Créez des dégradés linéaires et radiaux avec aperçu direct et copie CSS.
Créez des dégradés linéaires et radiaux avec aperçu direct et copie CSS. Utilisez-le au travail, en développement, en apprentissage ou pour une vérification rapide.
Cet outil fonctionne dans le navigateur. Avant d'utiliser des données sensibles, assurez-vous que votre appareil et votre navigateur sont fiables.
Un dégradé CSS est une image dessinée à la volée par le navigateur : on le place dans background ou background-image, sans téléchargement supplémentaire, et il reste net à toute taille. La syntaxe linéaire est linear-gradient(angle, arrêt 1, arrêt 2, …). 0deg va de bas en haut, 90deg de gauche à droite et la valeur par défaut, 180deg, de haut en bas ; 135deg donne la diagonale populaire du coin supérieur gauche au coin inférieur droit. Un radial-gradient s’étend depuis un centre : parfait pour des projecteurs, des halos ou du relief sur des boutons.
Un arrêt de couleur associe une couleur et une position, par exemple #f59e0b 0% et #10b981 100%. Ajouter des arrêts intermédiaires règle le rythme de la transition, et placer deux arrêts à la même position (50% et 50%, par exemple) fait basculer la couleur net, pour des rayures franches ou des fonds partagés. Chaque arrêt dispose ici de sa position et de son opacité ; l’opacité est exportée en rgba(), pratique pour des voiles qui gardent un texte blanc lisible sur une photo.
Quelques astuces : si les extrémités d’un grand dégradé sont éloignées sur le cercle chromatique, le milieu peut virer au gris terne ; ajoutez une couleur intermédiaire ou choisissez des teintes proches. Les dégradés très subtils peuvent laisser apparaître des paliers (banding) sur certains écrans ; accentuer légèrement l’écart ou ajouter un troisième arrêt aide. Pour un texte en dégradé, mettez le dégradé en fond et combinez-le avec background-clip: text et color: transparent.
Les navigateurs modernes prennent en charge linear-gradient et radial-gradient sans préfixe depuis des années : le CSS copié fonctionne tel quel, sans -webkit-. Partez d’un modèle, ajustez l’angle et les arrêts, vérifiez l’aperçu en direct puis copiez le code en un clic.
0deg va de bas en haut, 90deg de gauche à droite, 180deg (par défaut) de haut en bas et 270deg de droite à gauche. 135deg est une diagonale du haut-gauche vers le bas-droite.
Placez deux arrêts voisins à la même position, par exemple rouge 50% et bleu 50%. La couleur change à cet endroit sans fondu.
Superposez un dégradé linéaire du transparent vers un noir semi-transparent, par exemple de rgba(0,0,0,0) à rgba(0,0,0,0.6), pour assombrir la zone du texte.
Non. Tous les grands navigateurs gèrent la syntaxe standard depuis des années ; linear-gradient et radial-gradient suffisent.
Voir cette catégorie: Design & Couleurs
Convertissez en temps réel entre HEX, RGB, HSL et CMYK.
Ajustez les ombres de boîte et le flou d'arrière-plan avec copie rapide du CSS.
Vérifiez la conformité de contraste WCAG 2.1 entre texte et arrière-plan.
Simulez des corps rigides, la gravité et des collisions avec un moteur physique 2D interactif.
