Radial gradient as light simulation

How to use it

Add a radial gradient to an element, and assuming a top-down light source, put the lighter part of the gradient near the top-middle of the element.

When to use it

If you assume a single point of light is illuminating your interface, a radial gradient like this is slightly more realistic than a linear gradient from top to bottom. The effect is subtle, but adds slightly more visual interest for people who pay attention.

What to watch out for

It can be easy to overdo this gradient and make the light-to-dark transition more obvious, because it’s hard to notice that it’s a radial gradient otherwise. Try to resist that urge, and keep it subtle.

Examples