Dégradés radiaux CSS

Table des matières

Dégradés radiaux CSS

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

Pour créer un dégradé radial, vous devez également définir au moins deux arrêts de couleur.

Syntaxe

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

Par défaut, la forme est une ellipse, la taille est le coin le plus éloigné et la position est le centre.

Dégradé radial - Arrêts de couleur régulièrement espacés (valeur par défaut)

L'exemple suivant montre un dégradé radial avec des arrêts de couleur régulièrement espacés :

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Evenly Spaced Color Stops</h1>

<div id="grad1"></div>

</body>
</html>

Dégradé radial - Arrêts de couleur espacés différemment

L'exemple suivant montre un dégradé radial avec des arrêts de couleur espacés différemment :

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>

<h1>Radial Gradient - Differently Spaced Color Stops</h1>

<div id="grad1"></div>

</body>
</html>

Définir la forme

Le paramètre shape définit la forme. Il peut prendre la valeur d'un cercle ou d'une ellipse. La valeur par défaut est ellipse.

L'exemple suivant montre un dégradé radial en forme de cercle :

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red, yellow, green);
}

#grad2 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Shapes</h1>

<h2>Ellipse (this is default):</h2>
<div id="grad1"></div>

<h2><strong>Circle:</strong></h2>
<div id="grad2"></div>

</body>
</html>

Utilisation de mots-clés de différentes tailles

Le paramètre size définit la taille du dégradé. Il peut prendre quatre valeurs :

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

Exemple

Un dégradé radial avec des mots-clés de différentes tailles :

   #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 →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

#grad3 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}

#grad4 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}
</style>
</head>
<body>

<h1>Radial Gradients - Different size keywords</h1>

<h2>closest-side:</h2>
<div id="grad1"></div>

<h2>farthest-side:</h2>
<div id="grad2"></div>

<h2>closest-corner:</h2>
<div id="grad3"></div>

<h2>farthest-corner (default):</h2>
<div id="grad4"></div>

</body>
</html>

Répéter un dégradé radial

La fonction repeating-radial-gradient() est utilisée pour répéter des dégradés radiaux :

Exemple

Un dégradé radial répétitif :

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>

<h1>Repeating Radial Gradient</h1>

<div id="grad1"></div>

</body>
</html>