Add a drop shadow to blocks

 

Email client support for drop shadow

You can add a drop shadow (box-shadow property) to your entire design or to individual blocks. The drop shadow technique will work pretty well in most web email clients. Browser support is very good. Unfortunately, it does not work in Outlook PC.

 

To add a drop shadow to your design container

 

1. In your design, click on the STYLESHEET tab

 

2. Under ESSENTIALS, click Background

 

3. Open the Email Container

 

4. Select CSS from the right side in this section

 

5. Insert this line of code below directly above the closing `}`

box-shadow: 10px 10px 5px #888888;

 

You can change the length and blur of the shadow by adjusting the pixel coordinates. Adjust the color of the drop shadow by changing the color code.

 

6. Click I’m Done

 

 

 

To add a drop shadow to a single image or text block

 

1. In your design, click on an image or text block

 

2. Click Styles

 

3. Open the Block Container

 

4. Follow steps 4-6 above

 

 

 

To add a drop shadow to all of your text or image blocks

 

1. In your design, click on the STYLESHEET tab

 

2. Under SINGLE BLOCKS, open the Text or Image block styles

 

3. Open the Block Container

 

4. Follow steps 4-6 above