For on-screen design (web or desktop applications), in areas where there is significant background space visible, a subtle gradient adds a lot to the look of the app/page/image. How many colors (max) should be used in this gradient? How far apart in tone/hue should they be?

3 Answers 3


I think the question is really one of your particular site and the client's need for the visual effect of a gradient. I think the current trend is (using HSV as a visual construct) to pick just one hue, and use saturation or value to shift it across the spectrum. In most cases, the scale of the gradient is also pretty large; small enough for you to see it in one screen but large enough for it to be subtle.

A previous trend was to use a variety of colors in a subtle way in order to create visual interest over a monochrome foreground. I'm struggling for a great example but one is the "Fluid" theme of the tumblr default layouts : http://safe.tumblr.com/theme/preview/979 . In this case it's one major gradient that actually shifts between two completely different hues, but there are subtler interchanges of color at the intersection. A counter-example would be the much-lauded during the previous US election Barack Obama campaign site : http://www.BarackObama.com , which utilizes a simple two-tone light and dark blue gradient that's blended using asymmetrical brushes.

In the end, it's up to you and the client what works best. But in my opinion, definitely try both and see how they look, even if you never show it to the client. Doesn't hurt to explore. : )


When making a background gradient, I usually stick to one hue and adjust only the brightness and maybe the saturation a little (the amount depends on the hue but I keep it subtle). Also I often use radial gradients instead of the classical linear one.


I think you're right. Subtle is good. Stick with two colors that are close together, and it can add a lot to the page.

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.