How do I add a drop shadow to my email? (Modern Editor)

Modern Editor makes it easy to add trendy techniques such as a drop shadow (box-shadow property) to your entire email or to individual blocks. Learn how to add a drop shadow to your email in this support post and also review the email client support section to understand where this trendy technique will be supported best.

 

Example of drop shadow

 

 


Topics covered in this article:

Email client support for drop shadow

Adding drop shadow to your email container

Adding drop shadow to an image or text area

 

 

Email client support for drop shadow

 

The drop shadow technique will work pretty well in most web email clients. Browser support is very good. Unfortunately, as with many trendy techniques, this does not work in Outlook PC. It does work for Outlook Mac.

 

 

Adding drop shadow to your email container

 

Follow these instructions to add a drop shadow around your email container (this is the email container that typically holds all your other blocks that make up your email):

 

1. Open your email template in Modern Editor

2. Click on the STYLESHEET tab from the left side of the editor (the edit content panel)

3. Under ESSENTIALS, click Email Background

4. Click open the Container element

5. Select CSS from the right side in this section

6. Insert the line of code below directly above the closing }

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

7. Click I'm Done

 

See how your drop-shadow has been applied!

 

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.

 

You can follow these same steps to add a drop shadow to all your text blocks or all your image blocks. Under the STYLESHEET tab go to the SINGLE BLOCKS section to open the Text or Image block styles, click open the Container element, select the CSS and add the same code.

 

 

 

Adding drop shadow to a single image or text area

 

Follow these instructions to add a drop shadow to a single text or image block in your email:

 

1. Open your email template in Modern Editor

2. Click on a text or image block from the right side of the editor (the email preview panel)

3. Click the STYLES tab of the block from the left side of the editor (the edit content panel)

4. Click open the Container element

5. Select CSS from the right side in this section

6. Insert the line of code below directly above the closing }

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

7. Click I'm Done

 

See how your drop-shadow has been applied!

 

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.

 

 

 

Have more questions? Submit a request
Powered by Zendesk