Générateur de dégradé radial CSS
Créez des dégradés CSS visuellement : type linéaire, radial ou conique, curseur d'angle et jusqu'à six arrêts de couleur avec un aperçu pleine largeur en direct et le code CSS à copier.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur de dégradés avec le type radial déjà sélectionné : les couleurs rayonnent vers l'extérieur depuis le centre de l'élément en cercles concentriques, et chaque arrêt que vous modifiez redessine l'aperçu instantanément.
radial-gradient() est l'outil idéal pour les effets de projecteur et de lueur, les vignettes douces et les arrière-plans qui ont besoin d'un point focal plutôt que d'une direction. Les positions des arrêts en pourcentage correspondent à la distance depuis le centre — 0% est le milieu, 100% le bord extérieur — donc resserrer les premiers arrêts crée un petit cœur lumineux, les étaler crée un large dégradé.
Copiez la ligne d'arrière-plan une fois que l'aperçu vous convient. Le curseur d'angle est masqué dans ce mode car un cercle n'a pas de direction — revenez au mode linéaire ou conique et il réapparaît.