How do I add a gradient to a background area? (Modern Editor)

Learn how to add a gradient to a background area in your Modern Editor design.

 

Topics covered 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 Outlook.com—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 (Modern Editor)

 

We'll cover how to add gradients by pasting one line of code into the Modern Editor Styles UI. 


1. Open your document in Modern Editor.

 

2.1 Click on the block where you want to add the gradient, and go to the Container section:

 

2.2 If the gradient needs to be added across the document, go to the Stylesheet tab instead:

 

2.3 Select a color in the "Background Color" field

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

moderneditor-container-backgroundcolor.png

 

2.4 Scroll down and expand the "Background image (Advanced)" section

moderneditor-container-backgroundimage.png

 

3. Paste one of the following code examples into the Background Image field as shown

 

To add an angled gradient with non-hex colors:

linear-gradient(45deg, blue, white)

To add a vertical gradient using hex colors:

linear-gradient(180deg, #0076a3, #FFFFFF)

To add a horizontal gradient using hex colors:

linear-gradient(90deg, #0076a3, #FFFFFF) 

 

moderneditor-container-backgroundimage-gradient.png

 

4. Replace the colors in the code example with your own colors, as needed

 

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

 

FYI: You might see that the editor converts the color values to rgb if you click away then come back. Do not be alarmed. Example: linear-gradient(90deg, rgb(0, 118, 163), rgb(255, 255, 255))

If you need to make adjustments to the colors, just re-paste in one of our examples from Step 3

 

 

 

Have more questions? Submit a request
Powered by Zendesk