Gradient background for your email

Why use solid background when you can add flare of gradients in your HTML email.

Extremely easy to implement and I will explain how to, as well as show how to make it gracefully degrades to solid background in case the email client does not support CSS3 gradient.

CSS3 Gradient

With CSS3 gradient, it only takes a line of CSS to add gradient background. We do not have to create gradient images anymore and call it in CSS as background image anymore. One less request to server. You can create linear as well as radial gradient with two or more colors. Most major browsers supports this specification, and we have vendor prefix for some browsers.

How about support in email clients. Does all email clients support CSS3 gradient? No, not all email clients support CSS3 gradient, but we can always make it fall back to solid background. Just because some email clients (mostly older version of outlook) does not support this specification, does not mean we should not send email with beautiful gradient background to users who checks their email in modern clients.

I am not going to go into more details of CSS3 Gradient. There are tons of resources online you can learn from. If you Google for CSS gradient generator, you will find some websites that will generate one for you. The CSS gradient declaration we will use for our template is shown below:

This will create diagonal (45 degree) linear gradient background from color #8e36e0 to color #164b92.

Using CSS3 gradient in email

You can explore more on writing CSS gradient that meets your design requirement on your own. Now, lets look how its written for this template.

In this template we are applying the gradient background in a table-cell that spans the full with of the document and wraps primary CTA of our email. The HTML code below shows exactly how to do that.

Lets look at the key lines of the email code:

  • Line 1
    This table will be the foundation for our email template. Full width, white background and no cell spacing and padding.
  • Line 3
    This is the table cell that we are going to add our CSS3 gradient as an inline style. The important thing to notice here is bgcolor attribute with value #164c92. Also notice how this appears before inline style that has gradient style. The placement order does not matter for email client that do not support CSS3 gradient, but in other email clients, if bgcolor attribute comes after inline style, the gradient background will be override by solid color assigned to bgcolor attribute.
    So this is how we set a fall back to solid background for email clients that do not support CSS3 gradient.
  • Line 6 – Line 11
    This line is to make gradient background work for Outlooks using conditional CSS, similar to the one we use for targeting IE7 or IE8 or IE lt 9. But with email we check for mso to target versions of Outlooks. Pay attention to mso-width-percent:1000, this will make the rectangle 100% with. fillcolor=”#8e36e0″, is the starting color and color2=”#164c92″ is the ending color of the gradient.
  • Line 13 – Line 19
    This will be the table where we will code out CTA. Everything we want to be wrapped inside gradient cell must go here.
  • Line 30 – Line 34
    Other copies of email outside the gradient cell goes here.

I do not want to bore you with more reading. You will have much better understanding once you download the source code (just click the download button) and open in a text editor.