How to add a drop shadow to blocks

Add a drop shadow (box-shadow property) to your entire design or to individual blocks. Learn how to add a drop shadow in Modern Editor and review email client support to understand where this trendy technique will be best supported.

 

Example of drop shadow,

 

 


Topics covered in this article:

Email client support for drop shadow

Adding drop shadow to your design 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 design container

 

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

 

1. Open your design in Modern Editor.

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

 

3. Under ESSENTIALS, click 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 design:

 

1. Open your design in Modern Editor.

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

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

 

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