Un dégradé en CSS

De nouvelles propriétés permettent de réaliser et gérer des arrière-plans de teintes dégradées. Ces propriétés CSS3 sont prises en charges avec des préfixes dans la plupart des moteurs, par exemple -moz-radial-gradient et –moz-linear-gradient avec Firefox 3.6+, ou -webkit-gradient dans Safari 5+, et -ms-linear-gradient sous IE10+.

Créons un fond avec un dégradé de type radial :

div {
  width: 500px; 
  height: 200px;
  background: #d0e4f7; /* Vieux navigateurs */
  background: -moz-radial-gradient(center, ellipse cover, #d0e4f7 0%, #0a77d5 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#d0e4f7), color-stop(100%,#0a77d5)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #d0e4f7 0%,#0a77d5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, #d0e4f7 0%,#0a77d5 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, #d0e4f7 0%,#0a77d5 100%); /* IE10+ */
  background: radial-gradient(center, ellipse cover, #d0e4f7 0%,#0a77d5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#0a77d5',GradientType=1 ); /* IE6-9 horizontal */
}