iOS Tab Bar Highlight with Webkit CSS Gradients. Code Sampled from: http://cl.ly/2qas

css_tabbar_highlight_webkit_gradient.css

/* Sets Size of box containing gradients */

    .layer{
      width: 48px;
      height: 32px;
    }
    
/* Final Combined Gradient Image Composition */
    
    .all{
      background-image:
        -webkit-gradient(
          linear,
          left top,
          left bottom,
                from(     rgba( 068,213,254,0 )),
          color-stop(.43, rgba( 068,213,254,0 )),
                  to(     rgba( 068,213,254,1 ))),
        -webkit-gradient(
          radial, 
          60 162, 150, 
          60 162, 149, 
                from(     rgba( 049,123,220,0 )), 
                  to(     rgba( 049,123,220,1 ))),
        -webkit-gradient(
          radial, 
          20 -43, 60, 
          20 -43, 40, 
          from(           rgba( 125,170,231,1 )), 
          to(             rgba( 230,238,250,1 )));
    }
    
/* Broken Out Steps & Layers */
    
    .layer{
      background-color: #000;
    }
    
    .mid{
      background-image:
        -webkit-gradient(
          radial, 
          60 162, 150, 
          60 162, 149, 
                from(     rgba( 049,123,220,0 )), 
                  to(     rgba( 049,123,220,1 )));
    }

    .top{
      background-image:
        -webkit-gradient(
          linear,
          left top,
          left bottom,
                from(     rgba( 068,213,254,0 )),
          color-stop(.43, rgba( 068,213,254,0 )),
                  to(     rgba( 068,213,254,1 )));
    }
    
    .bak{
      background-image:
        -webkit-gradient(
          radial, 
          20 -43, 60, 
          20 -43, 40, 
          from(           rgba( 125,170,231,1 )), 
          to(             rgba( 230,238,250,1 )));    
    }
    
    .top-and-mid{
      background-image:
        -webkit-gradient(
          linear,
          left top,
          left bottom,
                from(     rgba( 068,213,254,0 )),
          color-stop(.43, rgba( 068,213,254,0 )),
                  to(     rgba( 068,213,254,1 ))),
        -webkit-gradient(
          radial, 
          60 162, 150, 
          60 162, 149, 
                from(     rgba( 049,123,220,0 )), 
                  to(     rgba( 049,123,220,1 )));
    }

markup.html

    <article class="webkit">
      <h1>Steps &amp; Gradient Layers Needed to Create the Tab Bar Highlight Image</h1>
      <ol>
        <li>
          <p>The first step was to figure out the curve using a radial gradient.</p>
          <div class="layer mid"></div>
        </li>
        <li>
          <p>Then I had to figure out the lighter blue linear gradient.</p>
          <div class="layer top"></div>        
        </li>
        <li>
          <p>After that I combined the two gradients making sure to put the linear gradient on top.</p>
          <div class="layer top-and-mid"></div>
        </li>
        <li>
          <p>Next step was to figure out the background radial gradient highlight.</p>
          <div class="layer bak"></div>
        </li>
        <li>
          <p>Lastly I combined all 3 gradient layers to complete it.</p>
          <div class="layer all"></div>
        </li>
      </ol>
    </article>