What are these effects supposed to replicate ? Is it a reflection, a refraction, caustics ?
When you do photography you often reflect a Softbox (a square diffuser that makes the light more even) or an umbrella (also diffusing the light but gives a round reflection). When taking pictures of shiny objects these are often placed so they reflect in the object, together with white and black sheets of papers around setup to give a good 3D feel representing the true shape.
These glass buttons simulate that effect, the Softbox reflecting in the surface from top. As the even light isn't perfectly even the light is typical represented as a gradient where the edge of the softbbox is not so bright as the center of it.
The inner light in those button simulate both refraction and caustics.
Here's a walk-through how real-world shiny objects are photographed, the principle applies with glass (I add it here to show the principle):
Almost entirely the reflection from glass, or, shiny clear plastic. Imagine a smooth, curved physical glass/plastic button.
Sometimes, people go to town and simulate caustics and refraction as well, but usually reflection, and a gradient and optional counter reflection (like at the bottom of the first image) suggesting light from the underside therefore implying translucency, is usually enough.
Edit after rethinking from Horatio's comment -- When it implies a spherical or convex shape, as in the top example, much of the gradient will be simulating refraction, as would any added effect that implies the inverse of the background. Most real glass shapes have complex refraction that depends on the background, the angle of light, the material used and size and depth of any convex or concave curves; most examples of this effect keep it very simple with just a gradient going from dark at the top to light at the bottom.
This styling adds plenty of noise to a design already, so skipping refraction and caustics can be a legitimate design decision instead of (or, as well as...) laziness :)
As for the effect in general, glass effects in web UIs were very popular the mid/late 2000s, presumably using a mix of associations with shiny technology leaning on the concurrent trend for shiny, highly visible interaction points in gadgets of the time, and familiarity, due to the use of glass effects in the Windows 'Aero' UI theme which was popular at the time. It's an example of skeuomorphism - simulating properties of something from the physical world to suggest characteristics in something digital. Glass effects were also particularly popular in corporate websites (I imagine because shiny glass is associated with modern glass office buildings and so was used to set a modern corporate tone).
They are still quite widely used, but decreasingly so, presumably because:
|show 4 more comments|