How to create a linear gradient background that will display in emails in Outlook

Question

I want to add a linear gradient as the background of a newsletter I'm designing but I'm having problems setting it to work.

First, I used CSS linear-gradient with rgba colors. It was working in the browser in Apple Mail, but not with Outlook and Gmail.

Then I tried a PNG as a background image, covering the all viewport. It worked in Apple Mail, Safari, Gmail (desktop version) and Gmail App, but not in Outlook (mobile, App and desktop).

Then I used a code that I found here https://backgrounds.cm but it still is not working, see this screenshot: Outlook Desktop

I am now using a picture background that is 2000px*2000px. I tried to change the size, but it's still the same.

Here is the code I'm using now:

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td background="http://www.danselouisb.fr/newsletter/newsletter1/img/compagnie_danse_louis_barreau_FD-02.png" bgcolor="#d7554e" valign="top" style="-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
        <v:fill type="tile" src="http://www.danselouisb.fr/newsletter/newsletter1/img/compagnie_danse_louis_barreau_FD-02.png" color="#d7554e" />
        <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div> 

      NEWSLETTER NEWSLETTER NEWSLETTER 

</div>
      <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
</table>

How can I get the background to work in Outlook?

score 1 · Answer 1 · answered Apr 29 '20 at 05:36

This will work, and for those that do not support VML or linear-gradient, it will fallback to a single colour.

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td bgcolor="#001cb0" style="background:linear-gradient(-45deg, #00dfed 0%, #001cb0 100%);"><!-- Set fallback (bgcolor), and gradient -->
        <center style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
            <!--[if (gte mso 9)|(IE)]>
              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" fillcolor="#00dfed"  style="width:450pt">
              <v:fill type="gradient" color2="#001cb0" angle="45" />
              <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
              <center>
                <![endif]--><!-- Set for Outlook, 450pt = 600px for 120DPI & normal DPI, as long as you have CSS for above -->
            <table width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#ffffff;" role="presentation">
                <tbody>
                    <tr>
                        <td class="inner contents" style="border-collapse:collapse;padding-top:10px;padding-bottom:10px;padding-right:20px;padding-left:20px;width:100%;text-align:left;">
                            <h1 class="h1" style="magin:0;font-weight:bold;font-size:20px;magin-bottom:10px;text-align: center;color:#ffffff;">Background Gradients</h1>
                            <p style="magin:0;font-size:16px;magin-bottom:10px;color:#ffffff;">Works on all Apple/iOS, all Gmail, Outlook 2007-16, Samsung mail, and some others.</p>
                            <p style="magin:0;font-size:16px;magin-bottom:10px;color:#ffffff;">Doesn't work on Outlook.com (webmail) or Office 365, Outlook 2003 - however, in these cases, it will still show a single colour background of your choice. </p>
                            <p style="magin:0;font-size:16px;magin-bottom:10px;color:#ffffff;">The gradient could be applied to the whole row, or just the inner column (like now). Just move the bgcolor and style from the td, and the <!--[if .... --> code for Outlook to where you want it.</p>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!--[if (gte mso 9)|(IE)]>
            </center>
            </v:textbox>
            </v:rect>
            <![endif]-->
        </center>
    </td>
</tr>
</table>

score 0 · Answer 2 · answered Jan 13 '18 at 15:16

The following CSS is used for old versions of internet explorer so it might also work in some versions of outlook.

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ff0000, endColorstr=#00ff00);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ff0000, endColorstr=#00ff00)";

Unfortunately many mail clients still do not support simple things like css-gradients or background-images so you might be out of luck here.

How to create a linear gradient background that will display in emails in Outlook

2 Answers2