When used properly, gradients can add depth and visual appeal to elements in a layout. However, before adding one to your design, it's important to consider some common issues associated with gradients. 

Gradients should be treated as supportive elements. They're not a substitute for good design. A good rule of thumb when using decorative elements like these is to consider whether the layout would work if they weren't there. If the answer is "no," then work on solving the design problem -- don't try to decorate your way to a solution. 

Gradients often have a reputation for being cheesy, gaudy, or just plain ugly. While I'm sure we can all think of some really horrifying examples of gradients gone wild, there's nothing that says they have to be done badly. When choosing colors for a gradient, it's often best to limit the number of color stops, avoid high degrees of contrast and hue shift between colors, and keep away from tints and shades that look washed out or dirty. This produces a result that is less dramatic, but much richer for its subtlety. From a more technical standpoint, it also helps maintain the legibility of type overlaying the gradient and ensures a more graceful degradation if images don't render. 

If you're unsure where to begin, here's a simple technique that will consistently yield good results. Using the Gradient Editor in Photoshop (or any other CS program), use the color stop on the left to select a color from your brand palette or list of web-safe colors. Keep in mind that this will be the darker of the two colors in the gradient (and thus if it's too light, it may be good to seek out a darker tone). Next, select the same color with the color stop on the right, and increase its brightness by 10 to 15 percentage points. This should create a nice effect that resembles natural light bouncing off of an object. 

Since gradients are often used as the background for areas that use system text (like buttons, navigation, or promotional banners), it's important to consider how they'll look in an environment where background images aren't supported. By keeping the gradient's color shift simple and subtle and supplying a background color that is the same as the gradient's base color, you can ensure that the affected area will break down in a way that's still both functional and attractive. If many of your subscribers are using a client like Outlook, and it's important that they get the same experience as other subscribers, you can also consider keeping the gradients limited to areas which can be sliced out as regular images. 

For example, if you're designing a button, try using a flat background color in the text area. Then set aside 10px above and create a gradient that is lighter at the top but which transitions cleanly into the base color at the bottom, to create a highlight effect. Do the same below, but with a gradient that transitions into a darker tone for a shadow effect. These two image areas can be sliced separately and coded as button "caps" when the HTML file is produced.

 The 20 emails come from B2B and B2C brands spanning the globe. My personal favorites include Senior Designer Rocky Thomas's pick from Salesforce.com and Creative Director Julie Montgomery's pick from the UK company Selfridges, packed with very different and inspiring ideas for effective messaging. To see these and other great promotional emails, newsletters and transactional messages, download the PDF from our Research Library.