Gradient Password Reset email template
A password reset email with a deep teal band, a thin lowercase wordmark, a centered greeting, one rounded outline button and a short safety note.
Light shows the email as designed. Dark and Gmail show how email apps can change its colors.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Gradient Password Reset</title>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<style>
:root{color-scheme:light dark;supported-color-schemes:light dark;}
body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
table,td{mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;}
img{border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important;}
u + .ete-body a{color:inherit;text-decoration:none;}
@media only screen and (max-width:620px){
.ete-container{width:100%!important;max-width:100%!important;}
.ete-outer{padding:0!important;}
.ete-content{border-radius:0!important;}
.ete-px{padding-left:20px!important;padding-right:20px!important;}
.ete-stack{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;padding-left:0!important;padding-right:0!important;}
.ete-stack-gap{padding-bottom:20px!important;}
.ete-fluid{width:100%!important;max-width:100%!important;height:auto!important;}
.ete-fluid-cap{width:100%!important;max-width:280px!important;height:auto!important;display:block!important;margin-left:auto!important;margin-right:auto!important;}
.ete-stack-center,.ete-stack-center p{text-align:center!important;}
.ete-h1{font-size:28px!important;line-height:34px!important;}
.ete-h2{font-size:22px!important;line-height:28px!important;}
.ete-code{font-size:24px!important;letter-spacing:2px!important;}
.ete-btn-full{display:block!important;width:100%!important;box-sizing:border-box;}
.ete-ds-30{font-size:28px!important;line-height:31px!important;}
.ete-ds-22{font-size:28px!important;line-height:31px!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#111618!important;}
.ete-content{background-color:#111618!important;}
.ete-text{color:#c3c9cc!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#99a1a5!important;}
.ete-link{color:#6fd0ba!important;}
.ete-border{border-color:#2c3538!important;}
.ete-panel{background-color:#1a2124!important;border-color:#2c3538!important;}
.ete-btn{background-color:#5cbfa9!important;border-color:#5cbfa9!important;}
.ete-btn-text{color:#0d1715!important;}
.ete-btn-outline{border-color:#5cbfa9!important;}
.ete-btn-outline-text{color:#5cbfa9!important;}
.ete-logo-light{display:none!important;}
.ete-logo-dark{display:block!important;max-height:none!important;overflow:visible!important;}
}
[data-ogsc] .ete-text{color:#c3c9cc!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#99a1a5!important;}
[data-ogsc] .ete-link{color:#6fd0ba!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#111618!important;}
[data-ogsb] .ete-content{background-color:#111618!important;}
[data-ogsb] .ete-panel{background-color:#1a2124!important;border-color:#2c3538!important;}
body,table,td,th,p,a,span,div,li{mso-ascii-font-family:-apple-system;mso-hansi-font-family:-apple-system;mso-bidi-font-family:-apple-system;}
h1,h2,h3,.ete-hf{mso-ascii-font-family:-apple-system;mso-hansi-font-family:-apple-system;mso-bidi-font-family:-apple-system;}
.ete-f-poppins{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
</style>
<!--[if !mso]><!--><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap"><!--<![endif]-->
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#ffffff;">
<!-- Made with emailtemplateexamples.com -->
<div class="ete-preheader" style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Use the button inside to pick a new password. The link works for one hour. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#ffffff;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#ffffff;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td align="center" class="ete-px" style="padding:28px 32px 20px;background-color:#2f7a6d;"><a href="https://example.com/" style="text-decoration:none;color:#ffffff;"><span class="ete-f-poppins" style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:30px;line-height:38px;font-weight:700;letter-spacing:3px;color:#ffffff;">quillbox</span></a></td></tr>
<tr><td align="center" class="ete-px" style="padding:56px 6.67% 44px;mso-padding-alt:56px 40px 44px;background-color:#2f7a6d;text-align:center;"><h1 class="ete-ds-30 ete-f-poppins" style="margin:0;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:30px;line-height:36px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;">PASSWORD RESET</h1></td></tr>
<tr><td height="16" style="height:16px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h2 class="ete-heading ete-ds-22" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:22px;line-height:26px;font-weight:700;color:#212a2e;text-align:center;mso-line-height-rule:exactly;">Hi {{first_name}},</h2></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:24px;color:#6b6f72;text-align:center;">Someone asked to reset the password for your Quillbox account. Use the button below to choose a new one. The link works for one hour.</p></td></tr>
<tr><td align="center" class="ete-px" style="padding:16px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/reset" style="height:48px;v-text-anchor:middle;width:190px;" arcsize="50%" filled="f" strokeweight="2px" strokecolor="#2f7a6d"><w:anchorlock/><center style="color:#2f7a6d;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Reset password</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn-outline" href="https://example.com/reset" style="display:inline-block;background-color:transparent;border:2px solid #2f7a6d;line-height:44px;border-radius:24px;color:#2f7a6d;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span class="ete-btn-outline-text" style="color:#2f7a6d;">Reset password</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:14px;line-height:22px;color:#8a8f93;text-align:center;">This request came from a laptop in Lisbon on Tuesday at 9:42. If it was not you, ignore this email and your password stays the same, or <a class="ete-link" style="color:#2f7a6d;text-decoration:underline;" href="https://example.com/support">write to support</a>.</p></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:24px;color:#6b6f72;text-align:center;">Thanks,<br>
The Quillbox team</p></td></tr>
<tr><td height="16" style="height:16px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td align="center" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:13px;line-height:21px;color:#8a8f93;line-height:20px;text-align:center;"><strong>Quillbox</strong><br>Rua das Flores 18, 1200-195 Lisbon</p><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:13px;line-height:21px;color:#8a8f93;line-height:20px;text-align:center;padding-top:10px;">You get this email because a password reset was asked for on your account.</p><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:13px;line-height:21px;color:#8a8f93;line-height:20px;text-align:center;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#8a8f93;text-decoration:underline;">Unsubscribe</a></p></td></tr>
</table>
</td></tr>
<tr><td align="center" class="ete-muted" style="padding:20px 12px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:12px;line-height:18px;color:#8a8f93;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#8a8f93;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from EmailOctopus Templates (Karakol pack, transactional) by Three Hearts Digital (EmailOctopus), MIT license.
About this template
A password reset email for a software product that wants even its system emails to feel designed. The top is a deep teal band with a thin lowercase wordmark and the words Password reset in light caps.
Below the band everything is centered: a short greeting with the first name, one sentence on why the email arrived, and a rounded outline button in the same teal. A second paragraph says which device asked for the reset and what to do if it was not the reader, with a link to support.
The team signs off by name of the product, and a soft grey footer holds the address and a line on why the email was sent.
The design follows a well known open source template that used a color gradient behind the logo. Here the band is one solid color so it stays crisp, and every word is live text. Change the band color to your brand color and keep the rest.
Use it in your email tool
- Click Copy HTML, or download the .html file.
- In Mailchimp, Brevo, HubSpot or Klaviyo, start a new email with the custom HTML or code editor and paste it in.
- Change the text, links and images. Map merge tags such as {{first_name}} and {{unsubscribe_url}} to the tags of your tool.
- Send a test to yourself on desktop and phone before you send it to your list.
Sections in this email
- Teal band with wordmark and title
- Greeting
- Reset note
- Outline button
- Safety note
- Sign-off
- Footer
Subject line ideas
- Reset your Quillbox password
- Your password reset link
- {{first_name}}, here is the link you asked for
Preview text idea
Use the button inside to pick a new password. The link works for one hour.