Radial CSS gradient with width constraints?

Question

Here is the button gradient I'm trying to build with just CSS gradients:

This would typically be pretty easy to do, but as you can see, the gradient at the top looks more like a large clipped radial gradient since it dips down in the middle a bit and doesn't extend all the way to the edges.

So, any ideas how to pull this off with CSS?

Answer 1

In css the radial background center cannot lie outside it's container, but you can offset the radial background through positioning a child element with the gradient. Basically you are looking to do something like this:

which is close to simshaun's excellent solution. But, since I love challenges I wanted to try something with zero extra markup, I came up with this:

http://jsfiddle.net/xB4DU/

Which comes pretty close to your to your solution with zero extra markup. It's just a linear gradient with an inset shadow that attenuates the left and rightmost edges of the button.