Add a drop shadow to blocks

Article author
Miguel Panayotty

 

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.

 

Add a drop shadow to the email

1. In your design, click on the Stylesheet tab

 

2. Click Backgrounds in the Start Here section

 

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

 

 

 

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 in the section above

 

 

 

Add a drop shadow to all text or image blocks

 

1. In your design, click on the Stylesheet tab

 

2. Click Text or Image in the Single Blocks section

 

3. Open the Block Container

 

4. Follow steps 4-6 in the top section