Gradient as a more interesting background

How to use it

Apply a gradient as the background colour of an element.

When to use it

If you're using a large block of colour as a background to something, and aren't planning to use more complicated imagery, you can apply a gradient to the background to make it more visually interesting without a lot of effort. This will avoid the interface feeling too flat or unfinished.

What to watch out for

Be careful of the direction of the gradient. Surfaces are often darker at the bottom, because most light sources are top-down, which is why I've put the darker end of the gradient in the lower right corner of the example below. However, if I had made it a straight gradient from top to bottom, it might have been difficult to see that there was a gradient applied at all. The gradient below is applied from the top left corner to the bottom right, so that it is more noticeable.

Examples

Example