Have you ever wondered how they make an effect when an image looks like it's 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?
In order to add the shadow effect, first select the necessary element and open the code editor.
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 what 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 the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at email@example.com.
We would be glad to talk with you.