Free Email Templates by Colorlib
Free, responsive HTML email templates for Mailchimp and every other email service.
28 templates, all written in MJML and compiled to bulletproof,
table-based HTML — so they render reliably in Outlook (Windows) as well as modern web and
mobile clients. Use the pre-built N/index.html files as they are, or
build from source to customize.
For more email templates like these, see the full Colorlib list.
Templates
Click any preview to open that template. Each thumbnail shows the top of the email at its native 600px width — the templates themselves are much longer.
Colorlib classic · 1–20
Modern minimal · 21–24
![]() 21 · Lume SaaS welcome / onboarding |
![]() 22 · Northbound Order receipt |
![]() 23 · Strata Password reset / security |
![]() 24 · Brief Editorial newsletter |
Designed minimal · 25–28
![]() 25 · Loop Product launch · violet |
![]() 26 · Signal Webinar invite · blue |
![]() 27 · Verge Winback · terracotta |
![]() 28 · Pulse Dark-mode newsletter · cyan |
Table of Contents
- Templates
- Features
- Preview
- Quick Start
- Development
- How to Use
- Customization
- CSS Inlining
- Testing and Deliverability
- Email Client Support
- Recommended Workflow
- FAQ
- Contributing
- Changelog
- License
- Credits
Features
- Responsive layouts: Mobile‑first designs that adapt to phones, tablets, and desktops.
- Clean HTML/CSS: Readable, well-structured code that’s easy to customize.
- Common patterns: Heroes, content blocks, product grids, CTA buttons, and footers.
- Production-friendly: Built with email client quirks in mind.
- Free to use: Ideal for startups, marketers, and developers.
Preview
- Browse the template gallery above for a thumbnail of every template.
- Open
index.htmlat the repository root for a local gallery view linking to all 28 templates. - Open any individual template's
N/index.htmldirectly for a quick visual check. - For real email client previews, upload a template to your ESP (e.g., Mailchimp, Campaign Monitor, SendGrid) or use a rendering service (Litmus, Email on Acid).
Quick Start
# Clone the repository
git clone https://github.com/ColorlibHQ/email-templates.git
cd email-templates
# Open a template
# Example (adjust path as needed):
open path/to/template/index.html # macOS
# or
start path\to\template\index.html # Windows
# or
xdg-open path/to/template/index.html # Linux
Development
The HTML files are built from MJML sources. If you want to customize templates beyond simple find-and-replace, work in src/N.mjml and rebuild — don't edit N/index.html directly (it will be overwritten).
npm install # one-time: installs mjml, chokidar, playwright-core
npm run build # compile every src/N.mjml → N/index.html
npm run dev # watch + live-reload at http://localhost:3000/ (PORT=3001 to change)
npm run screenshots # regenerate the README thumbnails in screenshots/
npm run dev opens the gallery index and live-reloads when you save any src/*.mjml. Saving a
partial in src/partials/ rebuilds every template. Pass --no-open to skip launching a browser.
The dev server is a small dependency-free static server (scripts/dev.mjs) that serves each file exactly as it sits on disk, apart from one clearly-marked live-reload snippet appended to HTML responses. That fidelity is deliberate: bundler-style dev servers rewrite relative asset URLs, which makes the preview disagree with the file you actually send.
Requirements: Node.js ≥ 20.19 (chokidar 5 is ESM-only). npm run screenshots additionally
needs Google Chrome installed locally — playwright-core drives it but ships no browser of its own.
To add a new template (e.g., 29): copy a structurally similar src/N.mjml to src/29.mjml, drop assets in 29/images/, run npm run build. The build picks up any numeric filename matching ^\d+\.mjml$. See CLAUDE.md for layout patterns and MJML gotchas.
How to Use
- Pick a template folder and open
index.htmlin your code editor (or editsrc/N.mjmlif you've cloned for development — see Development). - Replace placeholder text, links, and images with your content.
- Inline CSS if needed (many ESPs do this for you — see CSS Inlining below).
- Upload the HTML into your Email Service Provider (ESP) or send via your application.
- Test across devices and clients before sending to your full list.
Customization
- Branding: Update colors, fonts, and logos to match your brand.
- Content blocks: Duplicate, reorder, or remove sections (e.g., features, testimonials, product rows).
- Images:
- Hos



























