I'm puzzled at the moment. I got this gradient
background-image: -webkit-radial-gradient(50% 65%, ellipse cover, #f2f2f4, #201935 55%);
It works on Safari, works on Safari changing the User Agent to
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5
which is the exact same webkit and browser as the one in the iPad
But when I load it on the ipad itself is not working, their forums say the webkit got support for it... can someone help me make it work?
or, can someone help me obtain the same result with webkit-gradient (I can't achieve something that adjust to resizing as well as the radial-gradient, nor the ellipsoid form), because apparently there is support for both?
I believe that it's an issue with the version of webkit currently used in iOS.
Desktop Safari also had issues with radial gradients up to version 5.1.
Changing the user agent of desktop Safari to 5.0 as I understand it only changes the user agent string reported to browsers not the actual rendering engine used.
Sadly, running against the iOS simulator confirms that radial gradients aren't currently available on iOS and this is also a problem on tablets I've tested using running Android 3.2.
The good news is that we're imminently due OS updates for both iOS and Android so hopefully this problem will just go away.
If you really need radial gradients between now and iOS 5 and Android 4 you'll have to resort to either background images or SVG. :(
(If anyone knows a CSS trick to get round this then I'd really like to hear it too.)