Creating a Dynamic Vertical Gradient in PHP

example-gradient.html

<style type="text/css">

#my-site-header {
  background-color: #FFFFFF;
  /* gradient: 16px height, #ffffff start, #404080 end */
  background-image: url("http://i.imgur.com/4L3aj.gif");
  background-position: left bottom;
  background-repeat: repeat-x;
}

#my-site-header h1 {
  padding: 6pt 0;
  text-align: center;
}

#my-site-header h1,
#my-site-navigation ul {
  margin: 0;
  text-align: center;
}

#my-site-navigation {
  background-color: #404080;
  padding: 3pt 0 6pt 0;
}

#my-site-navigation a {
  color: #ffffff;
  text-decoration: none;
}

#my-site-navigation li {
  display: inline;
  list-type: none;
  padding: 0 6pt;
}

</style>

<div id="my-site-header">
  <h1>Charles Stover's Website</h1>
</div>

<div id="my-site-navigation">
  <ul>
    <li><a href="https://charlesstover.com/" title="CharlesStover.com">Charles Stover</a></li>
    <li><a href="https://twitter.com/charlesstover" title="Charles Stover (charlesstover) on Twitter">Twitter</a></li>
    <li><a href="https://mtgeni.us/" title="MTGeni.us">MTGeni.us</a></li>
  </ul>
</div>