Apply two-toned or gradient background colour on marketing email

[JFee]

Hi, is two-toned/gradient background not supported on HubSpot? I tried adding custom html codes but it doesn't work. I know it can be done as 

[RThomas7]

@JFee It can only be done with custom code as there are no out of the box options for gradients or two-toned layouts.

You can pull this off with custom HTML and CSS. 

The trick here is to create a nested HTML element and style it with CSS. 
Then nest your email content within the styled element. 

[Kgeorrge · Accepted solution]

It seems like you’re trying to add a two-toned or gradient background to your marketing email in HubSpot, but running into some issues. While HubSpot’s drag-and-drop editor has some limitations, you can still achieve a gradient background with a bit of custom code.

You can try adding custom HTML and CSS code to create the gradient. For example, use inline CSS like this:

```html

<div style="background: linear-gradient(to right, #ff7e5f, #feb47b); padding: 20px;">

    Your content here

</div>

```

This code sets a gradient that transitions from one color to another. You can adjust the direction and colors to fit your design.

However, not all email clients support gradients, so it’s a good idea to set a fallback background color for those that don’t. Here’s how you can do that:

```html

<div style="background: #ff7e5f; background: linear-gradient(to right, #ff7e5f, #feb47b); padding: 20px;">

    Your content here

</div>

```

The solid color will display if the gradient isn’t supported, ensuring your email still looks good.

Make sure to test your email across different email clients to see how the gradient renders. Some adjustments might be needed based on how it looks on different devices.

This approach should help you get that gradient background working in your HubSpot emails!

[JFee]

Thanks! I've tried some other custom codes that I found online but didn't work before. Yours work though!