Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Adding a gradient background to your buttons - Gradient button backgrounds exported from Emailify work in most email clients (including Outlook), but will fallback to to the first solid color in your Figma gradient for any email clients that don't support gradient backgrounds (for example, Yahoo! Mail).. Machine-readable page: /emailify/design/button-gradient-background.md.

Adding a gradient background to your buttons

Gradient button backgrounds exported from Emailify work in most email clients (including Outlook), but will fallback to to the first solid color in your Figma gradient for any email clients that don't support gradient backgrounds (for example, Yahoo! Mail).

Video Tutorial: Add Outlook-compatible gradient buttons to HTML emails with Figma

This video walks through how to add Outlook-compatible rounded gradient buttons to HTML emails using the Figma Emailify plugin.

You can add a gradient background to your Button layers in Emailify by setting the "Fill" property on your layer in Figma to a linear or radial gradient. This will automatically add a gradient background to your Button when it's exported to HTML.

Gradient button backgrounds exported from Emailify are supported in most email clients (including Outlook), but any email clients that don't support gradient backgrounds will fallback to the first solid color that you've used in your Figma gradient fill, so please ensure it's a suitable solid fallback color (with enough contrast against your button text color) for cases where it's not supported (for example, Yahoo! Mail).

Note that the gradient button code will not be included in any MJML exports, and the additional Outlook code for them won't be included in any SendGrid exports; this is due to each not supporting the additional code required for these enhancements.