CSS Gradients

Example of Gradient (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Gradient Example</title>

<style type="text/css">
div
{
    width         : 100px;
    height        : 50px;
    margin-top    : 10px;   /* leave a gap between each div */
    padding       : 10px;   /* put padding around the text inside the div */    
}


#default
{
  background : -webkit-linear-gradient(#ff0000, #0000ff);
  background : -moz-linear-gradient(#ff0000, #0000ff);
  background : -ms-linear-gradient(#ff0000, #0000ff);
  background : -o-linear-gradient(#ff0000, #0000ff);    
  background : linear-gradient(#ff0000, #0000ff);
}

#top  /* same as default*/
{
  background : -webkit-linear-gradient(top, #ff0000, #0000ff);
  background : -moz-linear-gradient(top, #ff0000, #0000ff);
  background : -ms-linear-gradient(top, #ff0000, #0000ff);
  background : -o-linear-gradient(top, #ff0000, #0000ff);    
  background : linear-gradient(top, #ff0000, #0000ff);
}

#left 
{
  background : -webkit-linear-gradient(left, #ff0000, #0000ff);
  background : -moz-linear-gradient(left, #ff0000, #0000ff);
  background : -ms-linear-gradient(left, #ff0000, #0000ff);
  background : -o-linear-gradient(left, #ff0000, #0000ff);    
  background : linear-gradient(left, #ff0000, #0000ff);
}

#even_stops 
{
  background: -webkit-linear-gradient(left, #ff0000, #0000ff, #ff0000, #0000ff, #ff0000);
  background: -moz-linear-gradient(left, #ff0000, #0000ff, #ff0000, #0000ff, #ff0000);
  background: -ms-linear-gradient(left, #ff0000, #0000ff, #ff0000, #0000ff, #ff0000);
  background: -o-linear-gradient(left, #ff0000, #0000ff, #ff0000, #0000ff, #ff0000);
  background: linear-gradient(left, #ff0000, #0000ff, #ff0000, #0000ff, #ff0000);
}

#arbitrary_stops 
{
  background: -webkit-linear-gradient(left, #ff0000, #0000ff 5%, #ff0000, #0000ff 95%, #ff0000);
  background: -moz-linear-gradient(left, #ff0000, #0000ff 5%, #ff0000, #0000ff 95%, #ff0000);
  background: -ms-linear-gradient(left, #ff0000, #0000ff 5%, #ff0000, #0000ff 95%, #ff0000);
  background: -o-linear-gradient(left, #ff0000, #0000ff 5%, #ff0000, #0000ff 95%, #ff0000);
  background: linear-gradient(left, #ff0000, #0000ff 5%, #ff0000, #0000ff 95%, #ff0000);
}

#radial_center 
{
  background: -webkit-radial-gradient(circle, #0000ff, #ff0000);
  background: -moz-radial-gradient(circle, #0000ff, #ff0000);
  background: -ms-radial-gradient(circle, #0000ff, #ff0000);
  background: -o-radial-gradient(circle, #0000ff, #ff0000);
  background: radial-gradient(circle, #0000ff, #ff0000);
}

#radial_position 
{
  background: -webkit-radial-gradient(80% 20%, closest-corner, #0000ff, #ff0000);
  background: -moz-radial-gradient(80% 20%, closest-corner, #0000ff, #ff0000);
  background: -ms-radial-gradient(80% 20%, closest-corner, #0000ff, #ff0000);
  background: -o-radial-gradient(80% 20%, closest-corner, #0000ff, #ff0000);
  background: radial-gradient(80% 20%, closest-corner, #0000ff, #ff0000);
}
</style>

</head>

<body>
<div id = "default">
Default
</div>

<div id = "top">
Top
</div>

<div id = "left">
Left
</div>

<div id = "even_stops">
Even stops 
</div>

<div id = "arbitrary_stops">
Arbitrary stops 
</div>

<div id = "radial_center">
Radial center 
</div>

<div id = "radial_position">
Radial position
</div>

</body>
</html>

Write code to draw a diagonal gradient, as shown here.

Gradients can be placed on any element. Write code to place a circular gradient on buttons, as shown here.

 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>