You can now improve the appearance of your buttons, columns, or entire sections of your template by adding color gradients, and make buttons more interactive by including hover styles. Instead of a single flat color, gradients blend multiple colors to create depth and visual interest. Hover style enables your buttons to change appearance when someone moves their mouse over them, helping you highlight key actions.
Important: Always keep in mind that not all email clients display gradients or hover effects correctly. Unfortunately, there's nothing we can do about this.
When using gradients, we recommend setting a similar background color as a fallback in case the gradient fails to load.
For hover effects, make sure your button design looks good in the default state and doesn't rely solely on hover styles in case they aren't displayed correctly.
Setting Up a Gradient
Whenever gradient options are available in the editor, you’ll see an “Add gradient” button.
Clicking it opens the Gradient panel, where you can create and customize your gradient. No matter where you open it, the Gradient panel always works the same way.
The Gradient Panel Explained
Here are all the controls in the Gradient panel, explained in the same numerical order:
1) Repeat
This toggle determines how the gradient fills the element.
When off, the gradient stretches across the entire element once.
When on, the gradient pattern repeats multiple times.
2) Radial
This toggle changes the gradient style:
When off, the gradient is linear, flowing along a straight line.
When on, the gradient becomes radial, starting from the center and spreading outward.
When Radial is active, the Angle setting is disabled.
3) Gradient Bar
This is where you design the transition between colors.
Every gradient must have at least two color stops. These are your start and end colors.
You can drag these stops along the bar to adjust how much space each color takes up and how abrupt the transition is. The closer the stops are, the sharper the transition will become.
The colors on the Gradient bar are arranged in the same order as they appear in the template.
You can reorder them by dragging one past another.
You can add new color stops by clicking anywhere on the bar. The color stop will automatically take on the color from that part of the Gradient bar.
Clicking a color stop opens a color picker. Here, you can change its color.
Hovering over a stop shows a small red X, letting you delete it. You can delete any color stop until only two remain.
The gradient updates instantly as you make changes, so you can fine-tune the exact look you want.
4) Angle
This controls the direction of a linear gradient. For example:
0° = left to right
90° = top to bottom
You can also enter an exact angle value in the input field next to the range slider. Again, this option isn't available for radial gradients.
Setting Gradients in Different Parts of the Editor
You can apply gradients in several places throughout the editor, and each location affects a different part of your email. Depending on where you use the "Add gradient" button, the gradient can style your entire template, individual structures or columns, blocks, or buttons.
Gradient always takes precedence over Background color, meaning that if any template element (column, button, etc.) has both a Background color and a Gradient set and both are loaded correctly, only the Gradient will be applied. In this case, the Background color appears only when the Gradient fails to load.
You’ll find gradient controls in:
Button style
Column properties
Template colors
Button hover
Let’s see how gradients behave in each of these sections!
Button style
All examples so far have used gradients added through the Button style panel.
When you set a gradient here, it applies only to that specific button, the same way each button can have its own background color, text color, or shape.
This is perfect when you want individual buttons to stand out with their own look.
Column properties
Gradients aren’t limited to buttons. You can also apply them to columns within a structure. When a gradient is set in Column properties, it becomes the background for the entire column, sitting underneath all content inside it - text, images, buttons, or anything else.
For example, if a structure has two columns, you can assign a different gradient to each one to create contrasting or complementary design sections.
Template colors
If you want a gradient applied everywhere by default, use the Template colors section in the Settings tab.
Setting a gradient here defines a global default for:
the entire template background
all structures
all buttons
These defaults apply automatically to any element that doesn’t already have its own background or gradient set. They also apply to all new structures and buttons you add later.
This is the best option when you want a consistent design theme across your whole email.
Hover Style
A hover style is a simple way to make your emails feel more interactive. Because a gradient effect can also be set as a hover style, we introduce both features together. Hover effects apply only to buttons, and they allow your button to change appearance when someone moves their mouse over it.
To set up a hover effect, click a specific button to edit only that button or open the Settings tab to define a global hover style for all buttons. Once there, look for the section labeled Button hover.
Adding a Hover Style on a Button
Click the Add hover button to open the Button hover options panel.
If the controls look familiar, that’s because they are. The Button hover panel contains the same settings as the Button style panel we reviewed earlier. This means you can create a second version of your button, using the same tools such as background color, text color, or gradient, and this alternate design will appear only while the user hovers over the button. Here’s a simple example:
Tip: You can also set "transparent" as a Button color on hover, as well as Text color on hover. If the Text color on hover is set to transparent, it will adopt the button's color when hovered. If the Button color on hover is set to transparent, it will adopt the color of the underlying structure when hovered.
Adding a Gradient effect as a Hover style
Gradients work perfectly with hover effects, too.
Just remember that the "Gradient on hover" has priority over the "Button color on hover" setting.
Conclusion
Gradients and hover styles unlock a whole new realm of creative options in your email designs. They make your messages more visually appealing, emphasize important elements, and showcase your brand in a more lively way. You’re no longer restricted to flat colors or static background images - everything is now integrated into the editor, fully customizable, and easy to use. Most importantly, it just works.
If you run into any issues or need help with anything, our Support team is always here for you.