Exemple de code de la fonction CSS -webkit-radial-gradient().

<style type="text/css">
/* Exemple de dégradés radiaux simples */
.degrade-couleur-radial-c{
  background-image : -webkit-radial-gradient(circle, #bff5c6, #008A11); 
}
.degrade-couleur-radial-e{
  background-image : -webkit-radial-gradient(ellipse, #bff5c6, #008A11); 
}

/* Exemple de dégradés radiaux avec positionnement des couleurs */
.degrade-couleur-radial-c-color-position{
  background-image : -webkit-radial-gradient(circle, #bff5c6 20%, #008A11 60%); 
}
.degrade-couleur-radial-e-color-position{
  background-image : -webkit-radial-gradient(ellipse, #bff5c6 20%, #008A11 60%); 
}

.degrade-couleur-radial-c-big{
  background-image : -webkit-radial-gradient(circle, #d2ff52 0%, #4ead39 24%, #2c8770 48%, #d3f450 77%, #91e842 100%); 
}
.degrade-couleur-radial-e-big{
  background-image : -webkit-radial-gradient(ellipse, #d2ff52 0%, #4ead39 24%, #2c8770 48%, #d3f450 77%, #91e842 100%); 
}

/* Exemple de dégradés radiaux avec positionnement du centre du dégradé */
.degrade-couleur-radial-c-top-right{
  background-image : -webkit-radial-gradient(right top, circle, #bff5c6, #008A11); 
}
.degrade-couleur-radial-e-top-right{
  background-image : -webkit-radial-gradient(right top, ellipse, #bff5c6, #008A11); 
}
.degrade-couleur-radial-c-right-bottom{
  background-image : -webkit-radial-gradient(right bottom, circle, #bff5c6, #008A11); 
}
.degrade-couleur-radial-e-right-bottom{
  background-image : -webkit-radial-gradient( right bottom, ellipse, #bff5c6, #008A11); 
}

/* Exemple de dégradés radiaux avec spécification de la fin du dégradé */
.degrade-couleur-radial-c-closest-side{
  background-image : -webkit-radial-gradient(50px center, circle closest-side, #d2ff52 0%, #4ead39 24%, #2c8770 48%, #d3f450 77%, #91e842 100%); 
}
.degrade-couleur-radial-c-closest-corner{
  background-image : -webkit-radial-gradient( 50px 10px, circle closest-corner,#d2ff52 0%, #4ead39 24%, #2c8770 48%, #d3f450 77%, #91e842 100%); 
}
.degrade-couleur-radial-c-farthest-side{
  background-image : -webkit-radial-gradient(50px center, circle farthest-side, #d2ff52 0%, #4ead39 24%, #2c8770 48%, #d3f450 77%, #91e842 100%); 
}
.degrade-couleur-radial-c-farthest-corner{
  background-image : -webkit-radial-gradient(50px 10px, circle farthest-corner, #d2ff52 0%, #4ead39 24%, #2c8770 48%, #d3f450 77%, #91e842 100%); 
}
.degrade-couleur-radial-e-closest-side{
  background-image : -webkit-radial-gradient(50px center, ellipse closest-side, #d2ff52 0%, #4ead39 24%, #2c8770 48%, #d3f450 77%, #91e842 100%); 
}
.degrade-couleur-radial-e-closest-corner{
  background-image : -webkit-radial-gradient(50px 10px, ellipse closest-corner, #d2ff52 0%, #4ead39 24%, #2c8770 48%, #d3f450 77%, #91e842 100%); 
}
.degrade-couleur-radial-e-farthest-side{
  background-image : -webkit-radial-gradient(50px center, ellipse farthest-side, #d2ff52 0%, #4ead39 24%, #2c8770 48%, #d3f450 77%, #91e842 100%); 
}
.degrade-couleur-radial-e-farthest-corner{
  background-image : -webkit-radial-gradient(50px 10px, ellipse farthest-corner, #d2ff52 0%, #4ead39 24%, #2c8770 48%, #d3f450 77%, #91e842 100% ); 
}

.findegrade {width:150px; height:50px; }
</style>
Dégradé circle :<br>
<div class="findegrade degrade-couleur-radial-c"></div>
Dégradé ellipse : <br>
<div class="findegrade degrade-couleur-radial-e"></div>

Dégradé circle couleur position :<br>
<div class="findegrade degrade-couleur-radial-c-color-position"></div>
Dégradé ellipse  couleur position : <br>
<div class="findegrade degrade-couleur-radial-e-color-position"></div>

Dégradé circle at right top :<br>
<div class="findegrade degrade-couleur-radial-c-top-right"></div>
Dégradé ellipse at right top : <br>
<div class="findegrade degrade-couleur-radial-e-top-right"></div>
Dégradé circle at right bottom :<br>
<div class="findegrade degrade-couleur-radial-c-right-bottom"></div>
Dégradé ellipse at right bottom : <br>
<div class="findegrade degrade-couleur-radial-e-right-bottom"></div>

Dégradé circle plusieurs couleur position :<br>
<div class="findegrade degrade-couleur-radial-c-big"></div>
Dégradé ellipse plusieurs couleur position  : <br>
<div class="findegrade degrade-couleur-radial-e-big"></div>
Dégradé circle closest-side : <br>
<div class="findegrade degrade-couleur-radial-c-closest-side"></div>
Dégradé circle closest-corner : <br>
<div class="findegrade degrade-couleur-radial-c-closest-corner"></div>
Dégradé circle farthest-side : <br>
<div class="findegrade degrade-couleur-radial-c-farthest-side"></div>
Dégradé circle farthest-corner : <br>
<div class="findegrade degrade-couleur-radial-c-farthest-corner"></div>
Dégradé ellipse closest-side : <br>
<div class="findegrade degrade-couleur-radial-e-closest-side"></div>
Dégradé ellipse closest-corner : <br>
<div class="findegrade degrade-couleur-radial-e-closest-corner"></div>
Dégradé ellipse farthest-side : <br>
<div class="findegrade degrade-couleur-radial-e-farthest-side"></div>
Dégradé ellipse farthest-corner : <br>
<div class="findegrade degrade-couleur-radial-e-farthest-corner"></div>