For mobile web apps I build, I always try to use gradients in place of images when I can. I wanted to try to duplicate the selected state of the iOS tab bar using only gradients. Here's what I came up with after a few iterations.
The first step was to figure out the curve using a radial gradient.
Then I had to figure out the lighter blue linear gradient.
After that I combined the two gradients making sure to put the linear gradient on top.
Next step was to figure out the background radial gradient highlight.
Lastly I combined all 3 gradient layers to complete it.
Check out the source of this page to see how I put it together. Feel free to share this and use it on your projects however you like.
I plan to integrate this into my Webkit Retina Masked iOS Tab Bar Navigation very soon.
To see more of my expirements like this follow me on twitter and keep up on my blog.
You can also email me at jordandobson@gmail.com.
Special thanks to Daniel J. Pinter for asking me to rework his version to be included in one of his awesome JQTouch extensions.