CSS Gradients in HTML emails 🌈
This is the repo for the How to use CSS background gradients in HTML emails Maizzle guide.
There are 2 examples included:
- Promotional - using a gradient on an element inside the template
- Transactional - body background gradient
The templates use a CSS background-image linear gradient with a VML fallback for Outlook, which means it works in over 87% of all email clients (possibly even more, lots of email clients for the Mac should support this just fine).
Email clients that don't support either of those will show a solid background color.
CSS gradient works in:
- Apple Mail
- iOS Mail
- Outlook iOS
- Gmail iOS
- Gmail Android
- Gmail Web, Google Apps (browser)
- Samsung Mail
- Thunderbird
- + various other web-based email clients
VML fallback works in:
- Outlook 2007
- Outlook 2010
- Outlook 2013
- Outlook 2016
- Outlook 2019
Solid background color shows in:
- Outlook.com
- Office 365
- Yahoo! Mail
- AOL Mail
- Comcast, GMX, Telstra/BigPond
- Outlook 2003
Since v1.7.0, Tailwind includes CSS gradient utilities. However, these currently only work with CSS variables, which are poorly supported in email clients.
Because of that, this Starter uses the tailwindcss-gradients plugin instead.
Install the Maizzle CLI:
npm install -g @maizzle/cli
Scaffold a new project with this starter:
maizzle new gradients
Alternatively, you may clone this starter directly:
# remember to install dependencies with `npm install`
npx degit maizzle/starter-gradientsStart a local development server:
npm run dev
Build for production:
npm run build
Read the guide: https://maizzle.com/guides/gradients
Maizzle documentation is available at https://maizzle.com