How to add the shadow effect?

In this article you will learn how to implement shadows to your content.

Yaroslav Zhbadinskyi avatar
Written by Yaroslav Zhbadinskyi
Updated over a week ago

Have you ever wondered how they make an effect when an image looks floating above the email’s surface?

This effect can be achieved by adding shadows to your content. At Stripo, you can apply the shadow effect to any component of an email: an image or a text block, a container, or a whole structure.

Important to note: not all email clients support the shadow effect. Here you can check which email clients support it.

How to add the shadow effect?

First, select a necessary element and open the code editor to add the shadow effect.

I’m choosing an image:

Find the HTML tag that corresponds to our element. In our case, we’re looking for the tag img that is related to the image. Then the attribute style with the property box-shadow must be added there.

Add this piece of code to the attribute img:

style="box-shadow: #9c958f 3px 3px 5px;"

If the tag already has the attribute style, then we only need to add this piece of code inside the style attribute:

box-shadow: #9c958f 3px 3px 5px;

Here is an example of how the code should look like:

The shadow can be customized by changing the code’s values:

Besides, you can also try finding a CSS generator for the shadow’s code to make the shadow effect even more interesting.


Thank you for taking your time to read our articles. We hope you will find this information helpful.

If you have any additional questions, please email us at support@stripo.email.

We would be glad to talk with you.



Did this answer your question?