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:

gradient example

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.

  • 1
    No. There are no rules regarding it. Do what looks good.
    – DA01
    Jul 7, 2014 at 15:49
  • 2
    I prefer subtle gradients. Yours have a rather extreme range. If you used more subtle gradients the differences among devices would be less noticeable and I believe your design would be better.
    – user13497
    Jul 8, 2014 at 21:00

1 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:

enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.