CSS Gradient
Generator
Générez de beaux dégradés CSS — linéaires, radiaux ou coniques — et copiez le code instantanément. Aperçu en direct lors de l'ajustement des couleurs et de l'angle.
① Choisissez type et angle du dégradé ② Choisissez deux couleurs ③ Copiez le CSS
background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);Transition des couleurs le long d'une ligne droite définie par un angle (0–360°). 0° va de bas en haut, 90° de gauche à droite.
Les couleurs rayonnent depuis un point central vers l'extérieur en forme elliptique ou circulaire. Idéal pour les effets spotlight et glow.
Les couleurs tournent autour d'un point central comme une roue chromatique. Parfait pour les graphiques circulaires et les designs angulaires.
Comment fonctionnent les dégradés CSS — linéaire, radial et conique
Les dégradés CSS sont générés entièrement par le navigateur sans fichiers image. Un dégradé linéaire mélange des color stops le long d'un axe : linear-gradient(). Un radial émane d'un point focal : radial-gradient(). Un conique fait tourner les couleurs angulairement : conic-gradient(). Les trois se définissent via background ou background-image. Les positions de stop (0%–100%) contrôlent où chaque couleur commence et se termine.