Gradient as concave face

How to use it

Apply a gradient to an element, moving from darker at the top to lighter at the bottom, assuming a top-down light source.

When to use it

If you want to make an element like a field appear to be bending away from the user - into the interface - you can use a gradient like this. This is because light will hit the lower half of the face of the element more than the upper half, if it's concave.

What to watch out for

You might need to tweak this gradient to get it to look natural. It can be hard to get just right.

Examples

Example