{"id":13475925,"url":"https://github.com/maizzle/starter-gradients","last_synced_at":"2025-10-07T19:07:28.616Z","repository":{"id":38298681,"uuid":"242145190","full_name":"maizzle/starter-gradients","owner":"maizzle","description":"Use CSS background gradients in HTML emails, with VML fallback for Outlook.","archived":false,"fork":false,"pushed_at":"2023-03-31T13:57:31.000Z","size":255,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-07T15:43:07.303Z","etag":null,"topics":["css-gradient","html-emails","maizzle","outlook","vml-fallback"],"latest_commit_sha":null,"homepage":"https://maizzle.com/guides/css-background-gradients-html-emails/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maizzle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-02-21T13:26:58.000Z","updated_at":"2024-09-02T12:35:12.000Z","dependencies_parsed_at":"2024-02-17T23:31:41.878Z","dependency_job_id":"0b0b407a-163e-4c39-88a6-264c1500232a","html_url":"https://github.com/maizzle/starter-gradients","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maizzle%2Fstarter-gradients","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maizzle%2Fstarter-gradients/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maizzle%2Fstarter-gradients/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maizzle%2Fstarter-gradients/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maizzle","download_url":"https://codeload.github.com/maizzle/starter-gradients/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240593170,"owners_count":19825930,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-gradient","html-emails","maizzle","outlook","vml-fallback"],"created_at":"2024-07-31T16:01:24.765Z","updated_at":"2025-10-07T19:07:23.563Z","avatar_url":"https://github.com/maizzle.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cp\u003e\n    \u003ca href=\"https://maizzle.com/#gh-light-mode-only\" target=\"_blank\"\u003e\n      \u003cimg src=\"./.github/logo-light.svg\" alt=\"Maizzle\" width=\"300\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://maizzle.com/#gh-dark-mode-only\" target=\"_blank\"\u003e\n      \u003cimg src=\"./.github/logo-dark.svg\" alt=\"Maizzle\" width=\"300\"\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n  \u003cp\u003eCSS Gradients in HTML emails 🌈\u003c/p\u003e\n\u003c/div\u003e\n\n## About\n\nThis is the repo for the [How to use CSS background gradients in HTML emails](https://maizzle.com/guides/gradients) Maizzle guide.\n\n## Templates\n\nThere are 2 examples included:\n\n- [Promotional](https://github.com/maizzle/starter-gradients/blob/master/src/templates/promotional.html) - using a gradient on an element inside the template\n- [Transactional](https://github.com/maizzle/starter-gradients/blob/master/src/templates/transactional.html) - body background gradient\n\n## Compatibility\n\nThe 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).\n\nEmail clients that don't support either of those will show a solid background color.\n\nCSS gradient works in:\n\n- Apple Mail\n- iOS Mail\n- Outlook iOS\n- Gmail iOS\n- Gmail Android\n- Gmail Web, Google Apps (browser)\n- Samsung Mail\n- Thunderbird\n- \\+ various other web-based email clients\n\nVML fallback works in:\n\n- Outlook 2007\n- Outlook 2010\n- Outlook 2013\n- Outlook 2016\n- Outlook 2019\n\nSolid background color shows in:\n\n- Outlook.com\n- Office 365\n- Yahoo! Mail\n- AOL Mail\n- Comcast, GMX, Telstra/BigPond\n- Outlook 2003\n\n#### Tailwind CSS Gradients\n\nSince [v1.7.0](https://github.com/tailwindlabs/tailwindcss/releases/tag/v1.7.0), Tailwind includes CSS gradient utilities. However, these currently only work with CSS variables, which are poorly supported in email clients.\n\nBecause of that, this Starter uses the [`tailwindcss-gradients`](https://github.com/benface/tailwindcss-gradients) plugin instead.\n\n## Getting Started\n\nInstall the Maizzle CLI:\n\n```\nnpm install -g @maizzle/cli\n```\n\nScaffold a new project with this starter:\n\n```\nmaizzle new gradients\n```\n\nAlternatively, you may clone this starter directly:\n\n```bash\n# remember to install dependencies with `npm install`\nnpx degit maizzle/starter-gradients\n```\n\n## Development\n\nStart a local development server:\n\n```\nnpm run dev\n```\n\nBuild for production:\n\n```\nnpm run build\n```\n\n## Documentation\n\nRead the guide: https://maizzle.com/guides/gradients\n\nMaizzle documentation is available at https://maizzle.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaizzle%2Fstarter-gradients","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaizzle%2Fstarter-gradients","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaizzle%2Fstarter-gradients/lists"}