Add a background gradient

In this article

Email client support for gradients

Adding a gradient to a background area (Modern Editor)



Email client support for gradients

It may seem counter-intuitive, but an HTML color gradient is actually considered a background image. Since some email clients—including Outlook 2007/13/17 PC and—do not support background images, you'll need to set a solid color as a backup. The code included below will work well in most email clients, while falling back to a solid color in others.



Adding a gradient to a background area

1. Open your document in Modern Editor.


2. Click on the block where you want to add the gradient.


3. Click on Styles tab.


4. Open the Block Container element.


Or, if the gradient needs to be added across the design, go to the STYLESHEET > Background > Email Container instead:


5. Select a color in the Background Color field.

This is the color that will display if gradients are not supported.


6. Scroll down and expand the Background image (Advanced) section


7. Click the rainbow-colored icon to open the gradient builder tool


8. Click in the "Start Color" and "End Color" fields to choose the colors of your gradient


9. Drag the degree slider to adjust the angle of the gradient


10. Click I'm done when you are happy with your selections. This will apply the gradient to your design.



11. Leave Background Repeat set to `Repeat` and Background Position set to `0% 0%`


If you need to make adjustments to the colors, click the rainbow-colored icon again.