Background Gradients

Many email clients support CSS background gradients.

Maizzle includes a Tailwind CSS plugin that generates classes based on utilities that you define in tailwind.config.js, so you can easily use them in your emails.

CSS

Simply add the utility class on an element. Specify a background color first, so that email clients that don't support CSS background gradients can display a fallback:

<table class="w-full">
  <tr>
    <td class="bg-blue-500 bg-gradient-b-black-transparent">
      <!-- ... -->
    </td>
  </tr>
</table>

You can configure the directions in the plugin's options, in your tailwind.config.js:

theme: {
  linearGradients: theme => ({
    colors: theme('gradients'),
    directions: {
      't': 'to top',
      'tr': 'to top right',
      'r': 'to right',
      'br': 'to bottom right',
      'b': 'to bottom',
      'bl': 'to bottom left',
      'l': 'to left',
      'tl': 'to top left',
    },
  }),
  // ...
  radialGradients: theme => ({
    colors: theme('gradients'),
    positions: {
      'default': 'center',
      't': 'top',
      'tr': 'top right',
      'r': 'right',
      'br': 'bottom right',
      'b': 'bottom',
      'bl': 'bottom left',
      'l': 'left',
      'tl': 'top left',
    },
    shapes: {
      default: 'ellipse',
    },
    sizes: {
      default: 'closest-side',
    },
  }),
},

Outlook VML

Outlook for Windows doesn't support CSS gradients, but we can use VML.

You need to add it right after the element with the CSS gradient, wrapping your content like this:

<table class="w-full">
  <tr>
    <td class="bg-blue-500 bg-gradient-b-black-transparent">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
      <v:fill type="gradient" color="#0072FF" color2="#00C6FF" angle="90" />
      <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">            
      <div><![endif]-->
      [your overlayed HTML here]
      <!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->
    </td>
  </tr>
</table>

As you can see, you need to set a fixed width on the <v:rect> element - we recommend this instead of using mso-width-percent:1000;, as that is pretty buggy (especially in Outlook 2013).

Unfortunately, you will also need to manually set the HEX colors in the color="" and color2="" attributes, and you can only define an angle. But only if you care about email background gradients for Outlook 😉

Avoid inlining

Most email clients that support CSS gradients also support @media queries.

Use the all screen breakpoint utility to prevent Juice from inlining your gradient:

<table class="w-full">
  <tr>
    <td class="bg-blue-500 all-bg-gradient-b-black-transparent">
      <!-- ... -->
    </td>
  </tr>
</table>