Rules on gradient use

Question

I am developing web - mobile apps and basing the navigation around jQuery mobile lists, e.g. this demo.

I use this tool to obtain and change the gradient colour for each project. I mainly use a base colour and go from top(light) to bottom (darker) and this resembles the 'standard' way the default themes use in the jQuery widget.

I now need to follow through and use this as a backdrop for containers but if I use the same gradient in a container it looks different because of the colour spread:

Are there any rules regarding this? Should I go top (dark) middle (light) bottom (dark) on the larger areas.

Any links on this dark magic appreciatted.

Answer 1

If you want your gradients to look consistent, your best option is probably to give it a fixed height and then extend the bottom color as necessary:

This means you won't have a gradient down to the bottom, obviously, but all the screens will look similar.