What effect do gradient fills have on the eye?

There are many baseline rules in web design (and design in general) around how the use of color, shape, line-quality, and font. These rules typically have some grounding in the way the brain perceives these things in relation to each other.

Can anyone point me to a good resource explaining how to use gradient fills (linear and radial)? How they affect the eye, contrast with overlaid fonts, affect the perception of color, dominance, etc?

Resources don’t need to be targeted at web-design, as it probably applies to any screen-based graphical design, if not print design as well.


When it comes to gradients I know there are several opinions on this, but in my opinion gradients are best used when they provide depth. A gradient should never take away from a design or distract from the message of the design. In most instances they are being used to mimic a light source in either radial or linear format. Radial provides the best look for more of a spot and can be used to draw attention to a specific area of your application or design.

The best applications come when used in a subtle way to draw attention or provide depth and texture to a design. They are there to make objects or backgrounds seem more realistic as it pertains to light.

Here’s a link to a site that has some pics of good gradient use. While i don’t like the design of the site itself, it shows some good uses. – http://creativecurio.com/2009/06/taking-design-from-good-to-great-with-gradients/

Source : Link , Question Author : Adam , Answer Author : Stephen

Leave a Comment