First of all: we use gradients because we can. It has become incredibly easy to do so in web the last few years. If you give people a hammer, they will hit things.
But we humans are pattern-finding machines. What we are really good at, is determining depth. What is in front of something else? What is moving? Is it a lion, a bee or an oak tree far away, or a tiny oak tree two inches from my nose?
We are incredible at these things. Creating artificial intelligence that can do this sort of processing is immensely complicated, we are still a long way off. There are simply too much insanely complex processing going on.
The interesting thing there is that gradients, hues and shadows are essential to this. Without going into the mechanics of vision, of image processing in the brain and cognition (how we interpret this input), there is a valid point using gradients. You can, quite literally, make things pop. You can use gradients to _subtly help and manipulate the user in determining what is the most important information.
The sorting of objects in depth is based on the millenia-old notion that light comes from above and not below. There have been some interesting experiments done here; how living creatures goes raving mad if only exposed to light from below. The world very quickly does not make sense (there was one experiment with chickens, but I cannot find it right now). The following image might just demonstrate that it is almost instantaneous that light from above = convex, light from below = concave.
An therefore there is a difference in distance and therefore something is closer, and therefore some things are more "important" than others. The shapes that are shades as "further away" also give an impression of something recessed, inaccessible.
So taking a look at buttons on the web and buttons in real life. The web "maps" the real world onto a digital one. In a way, since we lack a language for the virtual we impose what we know. There are pages, buttons, folders, tabs, menus, rooms etc etc. Hence, the idea of changing a state of something to another state, binary, becomes a "button", going from one URL to another means a new "page", and IRL buttons exist in 3D. So mimicking RL, "buttons" were (yes, were) made to look like 3D objects. If the light comes from above, the button is "convex", when you click it, it becomes concave.
If web buttons (or anything else for that matter) have the imaginary light source from the bottom, it is easier to create an uneasy feeling that something is wrong: you have increased visual distance to that object. Of course, do it as much as you want, as long as it is a conscious choice.
If you start to look for it, you will see that a good deal of sites mix the imaginary light sources in their use of gradiated elements. This can be very confusing and promote a sense that something is not quite right. But the effect of placing the light source is very, very important.
So, why do we use gradients?
Because we can. Because they can actually help.
Lots, maybe most, gradients are pointless, annoying, counterproductive, or just simply unnecessary. I would urge restraint; much of it is awful. But they can be useful and good, used well.
Much web design these days go towards flat. I think that might be a process of the web growing up, in a way. We have all learned the point and principle of a virtual button, tab, folder, page etc. We get it. The 3D buttons helped, as it mimicked real life. We do not need that anymore. Even my very old dad got it now, so we do not have to mimic - the virtual can develop in ways better suited than to pretend to be in the physical world.
Further reading: the functional art