Dégradé radial CSS

Dégradé radial CSS

Le dégradé radial est défini par son centre.

Pour créer un dégradé radial, vous devez également définir au moins deux couleurs de repère.

Syntaxe

background-image: radial-gradient(shape size at position, start-color, ... , last-color);

par défaut,shape en ellipse,size au coin le plus éloigné,position au centre.

Dégradé radial - couleurs espacées uniformément (par défaut)

L'exemple suivant montre un dégradé radial avec des couleurs espacées uniformément :

Exemple

#grad {
  background-image: radial-gradient(red, yellow, green);
}

Essayez-le vous-même

Dégradé radial - espaces différents entre les couleurs

L'exemple suivant montre un dégradé radial avec des espaces différents entre les couleurs :

Exemple

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Essayez-le vous-même

Définir la forme

shape Les paramètres définissent la forme. Il peut accepter les valeurs circle ou ellipse. La valeur par défaut est ellipse (ellipse).

L'exemple suivant montre un dégradé radial circulaire :

Exemple

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Essayez-le vous-même

Utilisez des mots-clés de taille différents

size Les paramètres définissent la taille du dégradé. Il peut accepter quatre valeurs :

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Exemple

Défini des dégradés radiaux avec différentes valeurs de size :

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

Essayez-le vous-même

Dégradé radial répété

repeating-radial-gradient() La fonction est utilisée pour le dégradé radial répété :

Exemple

Dégradé radial répété :

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Essayez-le vous-même

Attributs de dégradé CSS

Le tableau suivant liste les attributs de dégradé CSS :

Attribut Description
background-image Définir une ou plusieurs images de fond pour un élément.