title: How would i add gradience to background color in a color clock?
body: <p>How would i add gradience to the background color? I would like the hours and minutes to control the color and the seconds to control gradience. For a pulsating effect starting from the center, with every second making like a ring of that color that gets darker and darker.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var clock, hour, min, sec, color;
  
  function displayTime(){
  clock=new Date();
  hour=clock.getHours(),
  min=clock.getMinutes(),
  sec=clock.getSeconds();
  
  //if single digit, add 0 to the left
  if(hour&lt;=9) hour='0'+hour;
  if(min&lt;=9) min='0'+min;
  if(sec&lt;=9) sec='0'+sec;
  
  color='#'+hour+min+sec;
  
  //set background color
  document.body.style.background= color;
  document.getElementById('time').innerHTML=""+hour+":"+min+":"+sec+"";
  
  //set interval
  setInterval(displayTime,1000);
  //}
  }
  
  
  displayTime();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#time{
   font-family: 'Bangers', cursive;
    color: white;
    font-size: 100px;
    position: relative;
    text-align: center;
    padding: 10%;
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" type="text/css" href="./dist/style.css"&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="time"&gt;&lt;/div&gt;
      &lt;script type="text/javascript" src="./dist/app-browserify.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>