Backgrounds for email: Part 3 – Vector Markup Language (VML)

Backgrounds for email: Part 3 – Vector Markup Language (VML)

There are a lot of things you can do with VML, like word art, shapes and all sorts of things, but unless you’re doing something really quirky just for those Outlooks, and unless you have a lot of spare time, then why would you?

I’ve covered off sections relating to VML Considerations in part 1 and part 2, but this was related to background images. In part 3 I want to highlight an alternative by looking creating VML gradients.

Why would you bother?

Recently I have been working a lot with a brand that uses a lot of background gradients in their designs, and in certain circumstances I’ve used background images (perhaps where there is one gradient section), and in other circumstances (where there have been numerous),  I have simply created the CSS gradients in the embedded style to keep things simpler and lighter, which i prefer.

Because I’d started moving towards more lightweight solutions for these templates, and the client had a large Outlook customer base, I figured if I could create these solutions in CSS, I should create then in VML as well as I knew it was possible.

Create the Gradient

It;s pretty much the same as adding a background image, or creating a VML gradient for a fallback button. In this example I have recreated a simple vertical gradient, running from one colour to the next. The crucial bit is all in the V:fill section. You set your two colours and then you toggle with the angle and the focus to create what you want.

<!--[if gte mso 9]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" 
stroke="false" style="width:600px;height:338px; padding:0px; margin:0px; 
display:block;" inset="0,0,0,0""><v:fill Type='Gradient' 
Angle='0'  Color='#007fcc' Color2='#003196'  Focus='0%' />
<v:textbox style="v-text-anchor:bottom;" inset="0,0,0,0">

Angle is self-explanatory. You change the angle according the reflect the gradient direction you require.

Focus is the starting position. The default is 0, but values range from 100% to -100%



What else can you do?

If you feel like experimenting with these a little more you can take them up a level, and looking at some of the sigma gradients.

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" coordsize="21600,21600" style='width:600px;height:350px' fillcolor=#446674>
<v:fill method="linear sigma" angle="45" color2="#000000" focus="100%" 
focusposition=".5,.5" focussize="0,0" type="gradientRadial"/>
<v:shadow on="t" Offset="0pt, 0pt" />

The code for these is a little different, but they’re quite interesting to mess around with. For these the ‘method’ changes to linear sigma, I have a ‘fillcolor’ set, and then just a ‘color2’. Again you can adjust the focus, and the angle as before, but with these you can create some interesting effects by using ‘focusposition’ and ‘focussize’

Focus Position

Like with Focus this is about the starting position/centre position for the gradient. But with radial gradients you can set two positions. from the left and from the top.

Focus Size

The values are fractions of the width and height of the shape. The first is a percentage of the fill to the right edge of the shape and the second is a percentage of the fill to the bottom of the shape. The default value is 0,0.


I’ve mocked up a few examples, but it’s worth having a play around with them as you can create some nice textures and effects with them. You can also use these in ’roundrect’, and add in ‘v:shadow’ as you can see in the code below.

<!--[if gte mso 9]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" 
xmlns:w="urn:schemas-microsoft-com:office:word" style='width:600px;height:350px' 
arcsize="4%" fillcolor="#446674">
<v:fill method="linear sigma" angle="270" color2="#000000" focus="100%" 
focusposition=".4,.8" focussize=".4,1" type="gradientRadial"/>
<v:shadow color=#333333 on="t" Offset="10pt, 10pt" opacity="40%" />

Give it a try, let me know if you come up with anything cool, or anything to add.

You can access the @litmusapp builder file here



Leave a Reply

Your email address will not be published. Required fields are marked *