How to apply background colors in HTML emails for Gmail

Other Questions Gmail
1

I’m looking for a way to set a background color in my HTML email that works properly in Gmail. I want the whole background to be a light gray, but the method I’m using doesn’t seem to be effective.

Here’s my current code:

<body style="margin: 0; padding: 0; background-color: #e2e3e7; font-family: Arial, Helvetica, sans-serif;">

Despite this, the background is still displaying as white instead of the gray shade I intended. Is it true that Gmail filters out certain CSS properties? What is the best method to ensure that background colors appear correctly in emails sent through Gmail? I’ve heard that there are limitations on CSS styles in Gmail, and I’m curious about any effective solutions for applying background colors.

2

Yeah, Gmail strips out body background styles completely. I use nested tables with bgcolor attributes as backup - been fighting this for years with email campaigns. What works: create a wrapper table that covers the full viewport and add bgcolor=“#e2e3e7” along with your CSS background-color. This fixes compatibility issues across all email clients, not just Gmail. Gmail’s mobile app handles backgrounds differently than web too, so test both versions. The bgcolor attribute saves you when CSS gets nuked.

3

Gmail strips out tons of CSS, including body background colors. Wrap everything in a table and set the background there instead.

Try this:

<body style="margin: 0; padding: 0;">
  <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #e2e3e7;">
    <tr>
      <td>
        <!-- Your email content here -->
      </td>
    </tr>
  </table>
</body>

Honestly though, email HTML quirks get old fast. I just automated everything with Latenode.

Built a workflow that grabs my content, wraps it in proper email HTML, and auto-sends test emails to different providers. No more manual coding or praying Gmail renders it right.

It handles all the table wrappers, inline styles, and Gmail fixes automatically. Saves me hours weekly and kills those “why is my email broken” headaches.

4

gmail’s email styling is a nightmare. Use cellpadding="0" cellspacing="0" bgcolor="#e2e3e7" on your outer table when css doesn’t work. Add !important to background-color - gmail sometimes listens to that. don’t forget to test in different gmail themes since dark mode breaks everything.

5

Gmail blocks body background styling, but I’ve had luck with div wrappers instead of tables. Use a full-width div with the background color and include both background-color and bgcolor for max compatibility.

<body style="margin: 0; padding: 0;">
  <div style="background-color: #e2e3e7; min-height: 100vh; width: 100%;" bgcolor="#e2e3e7">
    <!-- content goes here -->
  </div>
</body>

Min-height makes the background extend fully even with short content. I also throw a fallback background color on the outermost table cell for hybrid layouts. Test across Gmail’s web, iOS app, and Android app since they all render differently. Outlook’s weird too, so always include that bgcolor attribute just in case.