Gradients have been at the forefront of UI design since the inception of the webpages. However, just like any other design trend, it slowly faded away. But, with the rebranding of Instagram, gradients started trending again. Email marketers hopped on this train to create some highly customized email templates for their brands. Here are some examples of color gradients in emails to inspire you.
How have gradients evolved?
Gradients are not the same as they were during the 90s. Now, gradient colors have more white highlights to make the color blends look smoother. Some designers also add a few metallic touch-ups to gradients to make them look more futuristic. Email markets are using gradients in the background, fonts, hero images, titles, and even the CTA buttons. Nowadays, some are even using gradients and highlights to add more 3D features to 2D images. Adding some darker tones to one side and lighter tones on another brings more depth to your designs. This can be best understood with an example.
Calm uses a 2D picture of LeBron James to promote their new product. But, you will notice that the face looks more like a 3D model with HD qualities. It is because of the way they have arranged the gradient and adjustments made to the images. First, they used a horizontal gradient. Next, they adjusted the lighting on his face to reflect the colors. This adds some illusionary three-dimensional features to LeBron’s face. They have done the same with his portrait picture at the bottom.
Examples of gradients in emails
- Decathalon USA
Decathalon went for a simple color gradient for their email background. The dark colors start from the upper left corner and seamlessly merge with cream tones. The fonts on the hero image are also cream colored along with the clothing displayed. The gradient theme end here as they have used bold colors for the rest of the email content. As you can see, gradient coloring is versatile and pairs well with most other design philosophies.
Instead of creating flashy full gradient-colored emails, Robinhood decided to customize the only part that will capture the reader’s attention at the first glance- the hero image. The hero image is bright, colorful, and artistic. Different shades of purple sweep across the canvas. And, it is well-known that people often associate this color with luxury, ambition, and power. In other words, everything Robinhood stands for. The visual objects are painted with their trademark green color and contrast well with the background. The rest of the email is in plain black and white, with the important phrases highlighted in green.
To begin with, Discovery’s logo is a multi-colored gradient. One of the benefits is that they do not have to come up with new aesthetically pleasing transitioning hue patterns. They can just use the color of the logo to build their brand awareness. Rather than painting the whole background with this color, they underlined their brand name with a gradient bar. This is a much more subtle use of this design technique. Alternatively, you can use multi-colored fonts in your customized email template to make them stand out.
- Epic Games
Epic Games has created one of the most beautiful multi-gradient emails you will ever see. Not only did they add a gradient to their email, but they also turned it into an animation. The animation is fluid and uninterrupted. Furthermore, they have not cut any frames from the animation. Epic Games’ email marketing department truly outdid themselves while designing this email.
However, just because it worked for their audience, does not mean that it will do the same for your subscribers. Most of their targeted subscribers have high-end gaming devices with a lot of RGB lighting. So, they are used to flashy colors. On the other hand, your audience might find such looped flashing colors to be distressing and an assault on their senses. Hence, always A/B test your templates to find the right color scheme for your audience.
Sensei’s email design is aesthetically pleasing as they have used naturally forming gradients. The hero image has managed the amazing view of the evening sky merging with the ocean. They have added some fade-out effect and a light gradient to the bottom of that image. The rest of the template does not have any other gradient effects.
Initially, you might face some difficulty with creating a suitable gradient color for your template. In such cases, try to pick two colors most used by or those that best represent your brand. Now, try to blend these two colors. If it works, add some white highlights and hues to create a finished product. If not, try to select a complementary color for your primary shade. Better yet, outsource this process to experienced email marketing firms.
Author: Kevin George is the head of marketing at Email Uplers, that specializes in crafting Professional Email Templates, PSD to Email conversion, and Mailchimp Templates. Kevin loves gadgets, bikes & jazz, and he breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on email marketing blog.