Rounded white box with border and drop shadow on coloured background


I'm working on an email template design that utilises a white panel, with rounded corners, that holds the email content. This rounded white panel has a drop shadow on the right and bottom of the panel and is centred on a grey background.

The template has, broadly speaking, a header, body and footer, and the body of the email will need to be flexible in height as it may contain different amounts of copy and images as new emails are generated from the template.

I have little experience in designing and coding html emails, so I'm not too sure how to set up the email as a whole, but particularly the sides of the email body. At the moment I'm thinking repeating images that accommodate the flexibility the template will need? But will repeating images in a <td> be ignored by Hotmail/Gmail?

So, any advice on the best way to set up the html for this kind of design would be hugely appreciated.


roshodgekiss roshodgekiss, 6 years ago

Hi peter_b, welcome to the forums! My advice is to check out this email design from Panic. You will most probably find it to be a good starting point in terms of design and code for your own email template.

Get in touch with us on Twitter:
We're also on Facebook:

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free