{"id":3972,"date":"2021-04-21T13:25:34","date_gmt":"2021-04-21T17:25:34","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/background-colors-html-email\/"},"modified":"2025-12-08T12:15:04","modified_gmt":"2025-12-08T17:15:04","slug":"background-colors-html-email","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/background-colors-html-email","title":{"rendered":"The Best Way to Code HTML Email Background Colors and Gradients"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_5fbf1d53e385b9cc9c13aae52a273da2\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3>Key Takeaways<\/h3>\n<ul>\n<li>Understanding how background colors improve visual hierarchy and engagement helps you create more compelling, accessible email experiences.<\/li>\n<li>Applying bulletproof coding methods ensures your background colors render consistently across major email clients\u2014even with images off.<\/li>\n<li>Implementing gradient backgrounds with proper fallbacks lets you maintain brand style and visual impact, even in Outlook and legacy clients.<\/li>\n<li>Adapting background color strategies for Dark Mode keeps your emails legible, on-brand, and accessible across color-inverting environments.<\/li>\n<\/ul>\n<p>Coding background colors sounds like a simple task right? The truth? Even this minor bit of styling has some pitfalls, and there are a few considerations that need to be made to get consistent rendering across email clients.<\/p>\n<p>And it\u2019s not just developers that need to appease the inbox gods. With <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/dark-mode-email-best-practices\">Dark Mode<\/a> gaining momentum, there are even more environments to be aware of, some of which will require email designers to take extra care when applying background colors in their designs.<\/p>\n<p>In this blog post, you\u2019ll learn:<\/p>\n<ul>\n<li><a rel=\"noopener\" href=\"#benefits\">The benefits of background colors<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#how-to-code-solid-color\">How to code a solid color background (+ email client support)<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#how-to-code-gradient\">How to code a gradient background (+ email client support)<\/a><\/li>\n<li><a rel=\"noopener\" href=\"#dark-mode\">Tips to optimize for Dark Mode<\/a><\/li>\n<\/ul>\n<h2 id=\"benefits\">Why use background colors in email?<\/h2>\n<p>Putting a background color strategy into place meets a few needs when it comes to elevating your <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/state-of-email-design-tools\" target=\"_blank\" rel=\"noopener\">email design program<\/a>. From a technical standpoint, implementing background colors doesn\u2019t add any load time to your emails, and they\u2019re still visible even when images are turned off. They can help separate content, call out messaging, or set an email apart from others in your subscriber\u2019s inbox, potentially increasing engagement among your audience.<\/p>\n<h3>Stand out in the inbox<\/h3>\n<p>Just like <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-personalization\">personalization<\/a>, a great background can create an impactful opening experience\u2014like this email from <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.blurb.co.uk\/\">Blurb<\/a>.<\/p>\n<p>The hero area packs a punch. The bold orange background makes an impact by contrasting against the blue of the logo, elevating the brand identity. Once the reader scrolls past the hero area, secondary content sits on a white background, offering the ideal reading experience for larger bodies of copy.<\/p>\n<figure id=\"attachment_27212\" aria-describedby=\"caption-attachment-27212\" style=\"width: 386px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-27212\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/blurb-email-example-of-background-color-291x1024.png\" alt=\"blurb email example of background color\" width=\"386\" height=\"1359\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/blurb-email-example-of-background-color-291x1024.png 291w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/blurb-email-example-of-background-color-85x300.png 85w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/blurb-email-example-of-background-color-436x1536.png 436w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/blurb-email-example-of-background-color.png 494w\" sizes=\"(max-width: 386px) 100vw, 386px\" \/><figcaption id=\"caption-attachment-27212\" class=\"wp-caption-text\">Source: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/5-tips-for-building-a-creative-life\">Really Good Emails<\/a><\/figcaption><\/figure>\n<h3>Separate out sections<\/h3>\n<p>If you\u2019ve got a long email, color is a great way to visually separate different content blocks so it feels more digestible.<\/p>\n<p>Promotional emails from coffee house giant <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.starbucks.co.uk\/\">Starbucks<\/a> can be quite lengthy, with multiple promotions housed within a single email. To help sections stand apart from each other, different background colors are used.<\/p>\n<figure id=\"attachment_27213\" aria-describedby=\"caption-attachment-27213\" style=\"width: 386px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-27213 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/starbucks-email-example-of-background-colors-scaled.jpg\" alt=\"starbucks email example of background colors\" width=\"386\" height=\"2560\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/starbucks-email-example-of-background-colors-scaled.jpg 386w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/starbucks-email-example-of-background-colors-768x5096.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/starbucks-email-example-of-background-colors-309x2048.jpg 309w\" sizes=\"(max-width: 386px) 100vw, 386px\" \/><figcaption id=\"caption-attachment-27213\" class=\"wp-caption-text\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/builder\/227576b\">View this email in Litmus<\/a><\/figcaption><\/figure>\n<h3><\/h3>\n<h3>Elevate brand identity<\/h3>\n<p>Gradients are part of Marketing Agency <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/1973ltd.com\/\">1973 Ltd<\/a>\u2019s brand identity, which is why you often find bold linear gradients in the background of their emails. Background gradients can make compositions appear more dynamic, and even encourage the subscriber to scroll.<\/p>\n<figure id=\"attachment_27207\" aria-describedby=\"caption-attachment-27207\" style=\"width: 386px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-27207\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/1973-ltd-457x1024.png\" alt=\"1973 Ltd email example of gradient background\" width=\"386\" height=\"864\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/1973-ltd-457x1024.png 457w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/1973-ltd-134x300.png 134w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/1973-ltd-768x1720.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/1973-ltd-686x1536.png 686w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/1973-ltd-915x2048.png 915w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/1973-ltd.png 1320w\" sizes=\"(max-width: 386px) 100vw, 386px\" \/><figcaption id=\"caption-attachment-27207\" class=\"wp-caption-text\">Source: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/a-christmas-message-to-bring-us-together\">Really Good Emails<\/a><\/figcaption><\/figure>\n<p>So what\u2019s the best way to bring these techniques into your <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/background-colors-html-email\" target=\"_blank\" rel=\"noopener\">email development<\/a>? I asked my teammate and developer of Litmus emails, <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/carinslater\">Carin Slater<\/a>, to give us the lowdown on coding solid and gradient backgrounds.<\/p>\n<h2 id=\"how-to-code-solid-color\">How to code a solid HTML email background color<\/h2>\n<p>Background colors can be coded in multiple ways and in multiple places. But each method is not equally supported among email clients. Here\u2019s a quick chart of which background style code and color code method works for the top email clients.<\/p>\n<p><b>Email client support for background colors<\/b><\/p>\n<div style=\"background: #f6f6f6; border: 1px solid #ddd; padding: 15px;\">\n<table style=\"border: 0; margin: 0;\" width=\"100%\">\n<thead>\n<tr>\n<th>Style code<\/th>\n<th style=\"text-align: center;\" colspan=\"4\">CSS properties<br \/>\n\u2018background\u2019 and \u2018background-color\u2019<\/th>\n<th style=\"text-align: center;\" colspan=\"4\">HTML attribute \u2018bgcolor\u2019<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Color code<\/strong><\/td>\n<td>6 digit hex<\/td>\n<td>3 digit hex<\/td>\n<td>RGB<\/td>\n<td>RGBA<\/td>\n<td>6 digit hex<\/td>\n<td>3 digit hex<\/td>\n<td>RGB<\/td>\n<td>RGBA<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>Apple Mail 14<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr>\n<td>Outlook 2016 (macOS 10.12.6)<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>Outlook 13, 16, 19 (Windows 10)<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr>\n<td>Outlook Office 365 (Windows 10)<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>Outlook Office 365 (Mac OS 10.15)<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr>\n<td>Windows 10 Mail<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>Gmail App (Android 10)<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr>\n<td>Gmail App (iOS 13.4.1)<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>Outlook (Android 7.0)<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr>\n<td>Outlook (iOS 12.0)<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>Samsung Mail (Android 7.0)<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr>\n<td>iPad 11 Air (Gen 4 iOS 14.2)<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>iPhone 12 (iOS 14.2)<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr>\n<td>AOL Mail (Edge)<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>Comcast (Edge)<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr>\n<td>Gmail (Chrome)<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>Office 365<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr>\n<td>Outlook.com<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff;\">\n<td>Web.de<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<tr>\n<td>Yahoo! Mail<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<p>We all know email clients can be a bit persnickety. So what\u2019s the best way to code background colors so it works across all email clients? I\u2019ll walk you through our recommendation and why.<\/p>\n<h3>1. Use tables and table cells<\/h3>\n<p>There are four places in your HTML that you can add a background color:<\/p>\n<ul>\n<li>&lt;body&gt;<\/li>\n<li>&lt;div&gt;<\/li>\n<li>&lt;table&gt;<\/li>\n<li>&lt;td&gt;<\/li>\n<\/ul>\n<p>The safest place to add the background color is on a table or a table cell.<\/p>\n<p>The &lt;body&gt; tag is deleted in Yahoo and AOL, so any background color applied there won\u2019t show up in those email clients. And placing a color on a wrapping &lt;div&gt; after the body would work everywhere except Outlook clients since they don\u2019t support &lt;div&gt; tags in emails.<\/p>\n<p>To get the widest range of email client support, wrap your entire email in a 100% width &lt;table&gt; tag and put your background color there. And use table cells &lt;td&gt; for sections of your email so you have greater flexibility in coloring specific content blocks.<\/p>\n<h3>2. Add color with a CSS property and HEX color codes or RGB values<\/h3>\n<p>Background colors can be coded in multiple ways:<\/p>\n<ul>\n<li>Using the bgcolor HTML attribute<\/li>\n<li>Using the CSS property background-color<\/li>\n<li>Using the CSS shorthand property background<\/li>\n<li>Using the 6 digit hexadecimal color code<\/li>\n<li>Using the 3 digit hexadecimal color code<\/li>\n<li>Using RGB color values<\/li>\n<\/ul>\n<p>As far as how to put the background color on your table or table cell, you should use a CSS property.<\/p>\n<p>Testing the two CSS property methods\u2014background-color and background\u2014we found they both have the same, consistent results as long as you are only adding color (no images). According to <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.caniemail.com\/search\/?s=background\">caniemail.com<\/a>, using the background property for anything other than adding a color may result in your color not showing up.<\/p>\n<p>The bgcolor HTML attribute didn\u2019t fare well in Outlook, with inconsistent support for 3-digit HEX codes. And the use of RGB and RGBA values resulted in the incorrect color, or the color being dropped completely.<\/p>\n<p>Here\u2019s our background color test using the various methods in Outlook so you can see for yourself:<\/p>\n<figure id=\"attachment_27204\" aria-describedby=\"caption-attachment-27204\" style=\"width: 853px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-27204 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/Outlook-testing-853x1024.jpg\" alt=\"Litmus test on how background colors render in HTML email in Outlook\" width=\"853\" height=\"1024\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/Outlook-testing-853x1024.jpg 853w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/Outlook-testing-250x300.jpg 250w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/Outlook-testing-768x922.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/Outlook-testing.jpg 1264w\" sizes=\"(max-width: 853px) 100vw, 853px\" \/><figcaption id=\"caption-attachment-27204\" class=\"wp-caption-text\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/pub\/22ed928\">See this test in Litmus \u2192<\/a><\/figcaption><\/figure>\n<p>In other email clients, the 3-digit HEX code rendered well, but the RGB and RGBA values resulted in incorrect colors when applied to the bgcolor HTML attribute.<\/p>\n<figure id=\"attachment_27202\" aria-describedby=\"caption-attachment-27202\" style=\"width: 977px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-27202 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/Other-clients-testing-977x1024.jpg\" alt=\"Litmus test on how background colors render in HTML email in Apple Mail\" width=\"977\" height=\"1024\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/Other-clients-testing-977x1024.jpg 977w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/Other-clients-testing-286x300.jpg 286w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/Other-clients-testing-768x805.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/Other-clients-testing-545x570.jpg 545w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/Other-clients-testing.jpg 1366w\" sizes=\"(max-width: 977px) 100vw, 977px\" \/><figcaption id=\"caption-attachment-27202\" class=\"wp-caption-text\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/pub\/22ed928\">See this test in Litmus \u2192<\/a><\/figcaption><\/figure>\n<p>After all our testing, we came to one conclusion: Stick with the CSS properties, and use 3 or 6-digit HEX codes or RGB values. Those worked across all email clients.<\/p>\n<p>Introducing opacity with the alpha for the RGBA value wasn\u2019t supported in Outlook, Web.de, or GMX.de, but had decent support otherwise.<\/p>\n<p>So your final code should look something like this to color the whole background of a table:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"background-color: #427CA9;\"><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_2d68ebb5db86f20dbae5f8de19cfc310\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Or add color to a specific table cell:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;td style=\"background-color: #427CA9;\"><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_4633230802206e041320396f0644b69c\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>And that\u2019s really it!<\/p>\n<div class=\"cta\">\n<table style=\"background-color: #f2f3f6\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 20px 10px 20px 20px\"><img decoding=\"async\" class=\"alignleft size-full wp-image-4104\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/logo.png\" alt=\"Litmus logo\" width=\"140\" height=\"165\" \/><\/td>\n<td class=\"block-2\" style=\"padding: 20px 20px 20px 10px\">\n<p class=\"zero\"><strong>QA test your email\u2019s background colors and more<br \/>\n<\/strong><\/p>\n<p class=\"zero\">Did you do it right? See how your email looks in the most popular email clients\u2014so you can ensure an on-brand, error-free subscriber experience.<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\" target=\"_blank\" rel=\"noopener noreferrer\">Learn how \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<h2 id=\"how-to-code-gradient\">How to create a gradient background<\/h2>\n<p>When you want to take background colors up a notch, try adding gradients.<\/p>\n<p>CSS gradients aren\u2019t supported everywhere, but there are fallbacks that make it possible to render a gradient in <i>almost <\/i>all email clients.<\/p>\n<p><b>Email client support for gradient backgrounds<\/b><\/p>\n<div style=\"background: #f6f6f6;border: 1px solid #ddd;padding: 15px\">\n<table style=\"border: 0;margin: 0\" width=\"100%\">\n<thead>\n<tr>\n<th>Email client<\/th>\n<th>Support for CSS linear gradients<\/th>\n<th>Support for CSS linear gradients, VML gradients, and image fallbacks<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr style=\"background-color: #ffffff\">\n<td>Apple Mail 14<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr>\n<td>Outlook 2016 (macOS 10.12.6)<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff\">\n<td>Outlook 13, 16, 19 (Windows 10)<\/td>\n<td style=\"color: #ea7165\">\u2718 No<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr>\n<td>Outlook Office 365 (Windows 10)<\/td>\n<td style=\"color: #ea7165\">\u2718 No<\/td>\n<td style=\"color: #ea7165\">\u2718 No<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff\">\n<td>Outlook Office 365 (Mac OS 10.15)<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr>\n<td>Windows 10 Mail<\/td>\n<td style=\"color: #ea7165\">\u2718 No<\/td>\n<td style=\"color: #ea7165\">\u2718 No<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff\">\n<td>Gmail App (Android 10)<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr>\n<td>Gmail App (iOS 13.4.1)<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff\">\n<td>Outlook (Android 7.0)<\/td>\n<td style=\"color: #ea7165\">\u2718 No<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr>\n<td>Outlook (iOS 12.0)<\/td>\n<td style=\"color: #ea7165\">\u2718 No<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff\">\n<td>Samsung Mail (Android 7.0)<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr>\n<td>iPad 11 Air (Gen 4 iOS 14.2)<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff\">\n<td>iPhone 12 (iOS 14.2)<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr>\n<td>AOL Mail (Edge)<\/td>\n<td style=\"color: #ea7165\">\u2718 No<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff\">\n<td>Comcast (Edge)<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr>\n<td>Gmail (Chrome)<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff\">\n<td>Office 365<\/td>\n<td style=\"color: #ea7165\">\u2718 No<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr>\n<td>Outlook.com<\/td>\n<td style=\"color: #ea7165\">\u2718 No<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<tr style=\"background-color: #ffffff\">\n<td>Web.de<\/td>\n<td style=\"color: #ea7165\">\u2718 No<\/td>\n<td style=\"color: #ea7165\">\u2718 No<\/td>\n<\/tr>\n<tr>\n<td>Yahoo! Mail<\/td>\n<td style=\"color: #ea7165\">\u2718 No<\/td>\n<td style=\"color: #0e9453\">\u2713 Yes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<p>Here\u2019s how you can get started.<\/p>\n<h3>1. Apply CSS linear gradient backgrounds to a table or table cell<\/h3>\n<p>Just as you would do with solid color backgrounds, apply CSS linear gradient backgrounds to a table or table cell, or a containing div (we\u2019ll dive into an Outlook workaround shortly), to create something like this:<\/p>\n<figure id=\"attachment_27205\" aria-describedby=\"caption-attachment-27205\" style=\"width: 1000px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-27205 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/gradient-example-code.png\" alt=\"Litmus email example of CSS linear gradient background\" width=\"1000\" height=\"805\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/gradient-example-code.png 1000w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/gradient-example-code-300x242.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/gradient-example-code-768x618.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><figcaption id=\"caption-attachment-27205\" class=\"wp-caption-text\">See how we created this gradient in <a rel=\"noopener\" href=\"https:\/\/litmus.com\/builder\/aadd27a\">Litmus Builder<\/a><\/figcaption><\/figure>\n<p>In this example, the gradient includes three colors: purple, magenta and orange. The styling starts within the HTML with a solid color fallback applied to the bgcolor attribute. Then within the inline CSS styles, we repeat that fallback using the background property and RGB method.<\/p>\n<p>To create the linear gradient, we include the background property again and apply linear-gradient styling. Since the gradient we are creating renders diagonally from the top left to bottom right, we start with the gradient angle syntax (315deg). Then, in the order we would like the colors to appear, we use the RGBA method to declare each color.<\/p>\n<p>After the RGBA color styling, include the position you would like that color to appear. This will help to blend your colors together nicely. To get an idea of how to select a color position you can use an <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/cssgradient.io\/\">CSS gradient online generator<\/a>.<\/p>\n<p>You should end up with code that looks like this:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" bgcolor=\"#e37b46\" style=\"background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);\"><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_31a1a224074a69adac970f3472db32ff\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3>2. Create a fallback for Outlook with VML gradients<\/h3>\n<p>Do a lot of your subscribers use Outlook? Then you\u2019ll need to use vector markup language (VML) to add the background gradient.<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;!--[if gte mso 9]>\n&lt;v:background xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"t\">\n&lt;v:fill type=\"gradient\" color=\"#e37b46\" color2=\"#56328b\" \/>\n&lt;\/v:background>\n&lt;![endif]--><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_aad02b1ff563105eec32bd70d9627d42\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>VML gradients work best with two colors. There is the option to do three or more colors, but it turns out looking very much like something from the early 1990s, and there isn\u2019t much control over what you can do to tame it. If you want three or more color gradients, it\u2019s best to use an image (and I\u2019ll show you how in the next step).<\/p>\n<p>For image-based VML gradients, you\u2019ll have to play around with the image size to figure out the best way to get it to fill the space. You can use the type=\u201dframe\u201d or the type=\u201dtile\u201d attributes. I find <i>really<\/i> long skinny gradients work well for type=\u201dtile\u201d, whereas short wide gradient images work better with type=\u201dframe\u201d.<\/p>\n<p>The best way to see what works is to put the image in and <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\">see what it looks like in Litmus<\/a>.<\/p>\n<h3>3. Create an image-based fallback for Outlook, Yahoo, and AOL<\/h3>\n<p>If you\u2019ve got subscribers on Yahoo, AOL, Outlook (iOS and Android), and Outlook.com, you can create image-based fallbacks for them.<\/p>\n<p>Add a class of \u201cgradient\u201d to the cell or table you want the gradient applied to. Then, using <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/howtotarget.email\">different targeting methods<\/a>, you can assign a CSS <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email\/\">background image<\/a> to override the gradient CSS style where the gradient doesn\u2019t show up.<\/p>\n<p>To target Outlook.com, use something like this:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">[class~=\"x_gradient\"] { \nurl('https:\/\/campaigns.litmus.com\/_email\/content-support\/background-colors-blog\/background-gradient1.jpeg') !important; \nbackground-size: 100% 100% !important; \nbackground-repeat: repeat-x !important;\n}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_4893c636ef15be7c247c0b70ff5184fa\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>To target Yahoo &amp; AOL, use:<span style=\"font-weight: 400\"><br \/>\n<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.&amp; .gradient { \nurl('https:\/\/campaigns.litmus.com\/_email\/content-support\/background-colors-blog\/background-gradient1.jpeg') !important; \nbackground-size: 100% 100% !important; \nbackground-repeat: repeat-x !important;\n}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_e3b75d726c56b99abf51561d3c1f6abe\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>To target both the Outlook mobile clients, use:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">body[data-outlook-cycle] .gradient { \nurl('https:\/\/campaigns.litmus.com\/_email\/content-support\/background-colors-blog\/background-gradient1.jpeg') !important; \nbackground-size: 100% 100% !important; \nbackground-repeat: repeat-x !important;\n}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_b17107fadb3e37c1354e373b1de1d8f2\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>We created an image-based fallback for our example gradient. For this to repeat, we had to say goodbye to the gradient angle and arrange our colors to display from top to bottom:<\/p>\n<figure id=\"attachment_27206\" aria-describedby=\"caption-attachment-27206\" style=\"width: 1000px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-27206 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/gradient-example-image.png\" alt=\"litmus email example of fallback image-based gradient background\" width=\"1000\" height=\"788\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/gradient-example-image.png 1000w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/gradient-example-image-300x236.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/gradient-example-image-768x605.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><figcaption id=\"caption-attachment-27206\" class=\"wp-caption-text\">See how we created this gradient in <a rel=\"noopener\" href=\"https:\/\/litmus.com\/builder\/aadd27a\">Litmus Builder<\/a><\/figcaption><\/figure>\n<h3><\/h3>\n<h3>4. Use a solid fallback color for all other email clients<\/h3>\n<p>For those email clients that don\u2019t support either fix, make sure to provide a solid fallback color.<\/p>\n<p>In this case, use the bgcolor attribute with the 6-digit HEX color to provide the fallback color for Windows 10 and Office 365 desktop clients. Web.de will use the CSS background property as a fallback.<\/p>\n<p>So, if you want to color the whole background of a table, the final code to use inline in your emails is:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;table class=\"gradient\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" bgcolor=\"#e37b46\" style=\"background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);\">\n&lt;!--[if gte mso 9]>\n&lt;v:background xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"t\">\n&lt;v:fill type=\"frame\" color=\"#e37b46\" src=\"https:\/\/campaigns.litmus.com\/_email\/content-support\/background-colors-blog\/background-gradient1.jpeg\" \/>\n&lt;\/v:background>\n&lt;![endif]--><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_23e5f7b8191ed2c616ffffb2a0a93c6d\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>Or use this code if you want to color just a specific table cell:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;td class=\"gradient\" align=\"left\" valign=\"top\" bgcolor=\"#e37b46\" style=\"background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);\">\n&lt;!--[if gte mso 9]>\n&lt;v:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"width:[width]px; height: [height]px;\">\n&lt;v:fill type=\"frame\" color=\"#e37b46\" src=\"https:\/\/campaigns.litmus.com\/_email\/content-support\/background-colors-blog\/background-gradient1.jpeg\" \/>\n&lt;v:textbox inset=\"0,0,0,0\">\n&lt;![endif]--><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_859821d7846f7a09ea9f3142c6b7e528\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>If you\u2019re not familiar with VML and want to make sure you have it right, Campaign Monitor has a <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/backgrounds.cm\/\">handy tool<\/a> developed by <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/stigm\/\">Stig<\/a> for adding background images to email. You can use that same tool and replace the <span style=\"background-color: #eeeeee;font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;border: 1px solid #999999;padding: 5px\">v:fill type=&#8221;tile&#8221;<\/span> with <span style=\"background-color: #eeeeee;font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;border: 1px solid #999999;padding: 5px\">v:fill type=&#8221;gradient&#8221;<\/span> to create a gradient. Make sure to declare both your start and end gradient colors with <span style=\"background-color: #eeeeee;font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;border: 1px solid #999999;padding: 5px\">color=&#8221;&#8221;<\/span> and <span style=\"background-color: #eeeeee;font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;border: 1px solid #999999;padding: 5px\">color2=&#8221;&#8221;<\/span> and remove the <span style=\"background-color: #eeeeee;font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;border: 1px solid #999999;padding: 5px\">src=&#8221;&#8221;<\/span> attribute. In the above examples, use <span style=\"background-color: #eeeeee;font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;border: 1px solid #999999;padding: 5px\">v:fill type=&#8221;frame&#8221;<\/span> to make sure an image spans the entire frame and doesn\u2019t repeat. This is also a great fix for retina background images, but we\u2019ll leave that to <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.courtneyfantinato.com\/correcting-outlook-dpi-scaling-issues\/\">Courtney Fantinato<\/a>.<\/p>\n<h2 id=\"dark-mode\">Don\u2019t forget Dark Mode<\/h2>\n<p>Just when background color support was getting better, Dark Mode was thrown into the mix.<\/p>\n<p>This opportunity to create a bespoke reading experience based on a <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/dark-mode-vs-light-mode-email-design\/\">subscriber\u2019s contrast preferences<\/a>, is a huge win for accessibility\u2014but another hurdle for email designers and developers.<\/p>\n<table style=\"background-color: #f2f3f6\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 20px 10px 20px 20px\"><img decoding=\"async\" class=\"alignleft wp-image-22223\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/11\/ultimate-guide-to-dark-mode-post.jpg\" alt=\"hand holding up an apple iphone with apple mail in dark mode\" width=\"400\" height=\"211\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/11\/ultimate-guide-to-dark-mode-post.jpg 1400w, https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/11\/ultimate-guide-to-dark-mode-post-300x159.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/11\/ultimate-guide-to-dark-mode-post-1024x541.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/11\/ultimate-guide-to-dark-mode-post-768x406.jpg 768w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/td>\n<td class=\"block-2\" style=\"padding: 20px 20px 20px 10px\">\n<p class=\"zero\"><strong>The Ultimate Guide to Dark Mode Email<br \/>\n<\/strong><\/p>\n<p class=\"zero\">Optimizing emails for Dark Mode can be tricky. Check out our ultimate guide for coding and design tips for creating the best on-brand Dark Mode email subscriber experience.<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/the-ultimate-guide-to-dark-mode-email\/\" target=\"_blank\" rel=\"noopener noreferrer\">Get your how-to guide \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>Whilst email clients such as Apple Mail, iPad, the iPhone native mail apps, HEY, and the Outlook app can be targeted with embedded CSS styling, there are also email clients that use their own default rendering to offer a Dark Mode solution.<\/p>\n<p>Outlook.com, Office 365, and Gmail apps for iOS and Android all either partially or fully invert colors to <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode\" target=\"_blank\">create a Dark Mode experience<\/a>, sometimes with horrible results.<\/p>\n<p>There is no way to overwrite this color inversion <i>yet.<\/i> However, there are a couple of things you can consider to improve emails rendering in these environments.<\/p>\n<h3>Tip #1: Make informed design choices with color testing<\/h3>\n<p>It can be a little heartbreaking to see your colors get adjusted in ways you didn\u2019t intend. And it\u2019s somewhat worrying when a color doesn\u2019t change but a font color does\u2014and all your accessibility considerations go out of the window.<\/p>\n<p>It\u2019s worth testing your brand colors in email clients that invert colors for Dark Mode to see how they are altered. Once you have an idea of how your colors render, you can make informed color choices at the design stage.<\/p>\n<p>We ran a similar test to see how some of our colors and tones faired across email clients that we had no control over:<\/p>\n<figure id=\"attachment_27200\" aria-describedby=\"caption-attachment-27200\" style=\"width: 1825px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-27200 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/color-testing.png\" alt=\"Litmus HTML email background color test in Dark Mode\" width=\"1825\" height=\"1400\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/color-testing.png 1825w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/color-testing-300x230.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/color-testing-1024x786.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/color-testing-768x589.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/color-testing-1536x1178.png 1536w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/color-testing-1800x1381.png 1800w\" sizes=\"(max-width: 1825px) 100vw, 1825px\" \/><figcaption id=\"caption-attachment-27200\" class=\"wp-caption-text\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/checklist\/emails\/public\/8bf1907\">See this test in Litmus \u2192<\/a><\/figcaption><\/figure>\n<p>We found that using a light tone resulted in the background and text colors inverting reasonably well. And although the colors that render once inverted are not part of our color palette, we can offer an accessible reading experience in these email clients.<\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-27199 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/background-tones.png\" alt=\"Litmus HTML email background color examples in light mode vs dark mode\" width=\"1680\" height=\"1489\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/background-tones.png 1680w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/background-tones-300x266.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/background-tones-1024x908.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/background-tones-768x681.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/background-tones-1536x1361.png 1536w\" sizes=\"(max-width: 1680px) 100vw, 1680px\" \/>\n<h3>Tip #2: Use partial fixes for Gmail apps<\/h3>\n<p>Ways to tame color inversion within Gmail apps have come to light, thanks to the relentless efforts of the email community.<\/p>\n<p>https:\/\/twitter.com\/The_Annett\/status\/1204896185728716805<\/p>\n<p>By applying a linear gradient containing your background color to container elements, you can force your chosen color to appear in Gmail\u2019s light and Dark Mode environments.<\/p>\n<p>To do this, you need to add your linear gradient to the background-image CSS property using the HEX color method. Then make both colors in your gradient the color you want Gmail to honour, like so:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" bgcolor=\"#e37b46\" style=\"background-image: linear-gradient(#e37b46, e37b46);\"><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_b44642fae4a5bc1129550c5016946c0d\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>R\u00e9mi Parmentier has <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.hteumeuleu.com\/2021\/fixing-gmail-dark-mode-css-blend-modes\/\">expanded this workaround<\/a> to also prevent text colors from being inverted in Gmail apps using CSS blend modes.<\/p>\n<p>Using these fixes can help you control some aspects of inverted rendering. However, this is only possible in Gmail and doesn\u2019t give the flexibility to change the colors of your email depending on the contrast mode your subscribers select.<\/p>\n<p>As frustrating as it is not being able to target email clients that invert your colors, you can regain a little control by: testing your color palette, making color choices based on test results, and working with these partial fixes.<\/p>\n<h2>Wow your subscribers with color<\/h2>\n<p>Color is a great way to add some oomph to the subscriber experience and keep your email content organized. And it takes less time and resources than images! That\u2019s a win-win all around. Remember to use <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\" target=\"_blank\" rel=\"noopener\">web safe fonts<\/a> to make your subscriber experience more consistent.<\/p>\n<p>So get started with this guide\u2014and we can\u2019t wait to see your colorful backgrounds in our inboxes.<\/p>\n<div class=\"cta\">\n<table style=\"background-color: #f2f3f6;\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 20px 10px 20px 20px;\"><img decoding=\"async\" class=\"alignleft size-full wp-image-4104\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/logo.png\" alt=\"Litmus logo\" width=\"140\" height=\"165\" \/><\/td>\n<td class=\"block-2\" style=\"padding: 20px 20px 20px 10px;\">\n<p class=\"zero\"><strong>Make sure your colors show up correctly<br \/>\n<\/strong><\/p>\n<p class=\"zero\">Do subscribers see your emails the way you intended? Preview how your emails look in over 90 email clients, apps, and devices\u2014with Litmus Email Previews.<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/pricing\" target=\"_blank\" rel=\"noopener noreferrer\">Book a Demo \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<p><i>Originally published on March 27, 2018, by Justine Jordan. Last updated on April 21, 2021.<\/i><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn the best way to code an HTML email background color and gradients with the tips you need to make them work for Outlook, Gmail, Dark Mode, and more.<\/p>\n","protected":false},"author":6,"featured_media":27197,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[9793,478,499,102],"blog_category":[53],"class_list":["post-3972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-color","tag-design","tag-email-coding","tag-html","blog_category-tips-resources"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML email background color: The best way to code them - Litmus<\/title>\n<meta name=\"description\" content=\"Learn the best way to code an HTML email background color and gradients with the tips you need to make them work for Outlook, Gmail, Dark Mode, and more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/background-colors-html-email\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Best Way to Code HTML Email Background Colors and Gradients\" \/>\n<meta property=\"og:description\" content=\"Learn the best way to code an HTML email background color and gradients with the tips you need to make them work for Outlook, Gmail, Dark Mode, and more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/background-colors-html-email\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-21T17:25:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-08T17:15:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/HowToCodeBackgroundColors-Blog3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"724\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML email background color: The best way to code them - Litmus","description":"Learn the best way to code an HTML email background color and gradients with the tips you need to make them work for Outlook, Gmail, Dark Mode, and more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/background-colors-html-email","og_locale":"en_US","og_type":"article","og_title":"The Best Way to Code HTML Email Background Colors and Gradients","og_description":"Learn the best way to code an HTML email background color and gradients with the tips you need to make them work for Outlook, Gmail, Dark Mode, and more.","og_url":"https:\/\/www.litmus.com\/blog\/background-colors-html-email","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2021-04-21T17:25:34+00:00","article_modified_time":"2025-12-08T17:15:04+00:00","og_image":[{"width":1380,"height":724,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/HowToCodeBackgroundColors-Blog3.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/background-colors-html-email#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/background-colors-html-email"},"author":{"name":"","@id":""},"headline":"The Best Way to Code HTML Email Background Colors and Gradients","datePublished":"2021-04-21T17:25:34+00:00","dateModified":"2025-12-08T17:15:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/background-colors-html-email"},"wordCount":11,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/background-colors-html-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/HowToCodeBackgroundColors-Blog3.png","keywords":["Color","Design","Email Coding","HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/background-colors-html-email#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/background-colors-html-email","url":"https:\/\/www.litmus.com\/blog\/background-colors-html-email","name":"HTML email background color: The best way to code them - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/background-colors-html-email#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/background-colors-html-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/HowToCodeBackgroundColors-Blog3.png","datePublished":"2021-04-21T17:25:34+00:00","dateModified":"2025-12-08T17:15:04+00:00","description":"Learn the best way to code an HTML email background color and gradients with the tips you need to make them work for Outlook, Gmail, Dark Mode, and more.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/background-colors-html-email#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/background-colors-html-email"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/background-colors-html-email#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/HowToCodeBackgroundColors-Blog3.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2018\/03\/HowToCodeBackgroundColors-Blog3.png","width":1380,"height":724,"caption":"man sitting at desk as he codes background colors into his html email background color"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/background-colors-html-email#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"The Best Way to Code HTML Email Background Colors and Gradients"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=3972"}],"version-history":[{"count":10,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3972\/revisions"}],"predecessor-version":[{"id":121579,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3972\/revisions\/121579"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/27197"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=3972"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=3972"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=3972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}