How to change email background color in HTML, Stripo, Outlook, and Gmail

A plain white or mismatched background can weaken brand consistency, reduce contrast, or make an email harder to read in dark mode or on mobile. You may also need a different background to separate sections, match a campaign theme, or keep content readable when an image or gradient does not load.

To change an email background color correctly, first decide whether you need to edit a marketing email, the canvas around its content, a single Outlook message, the Gmail interface, or the HTML behind the design. This guide covers solid colors, gradients, background images, mobile rendering, dark mode, and email client limitations that affect what recipients see.

Key takeaways

1. Stripo lets marketers set background colors for the entire email, stripes, structures, containers, and supported content blocks.
2. Settings applied directly to an element override the default settings in General Styles.
3. The General Background Color in Stripo appears around the email content on desktop but is hidden on mobile.
4. Solid background colors offer broader email client support than gradients and background images.
5. Gradients and background images need a solid fallback color.
6. Gmail themes change only the Gmail interface. Custom email backgrounds can be created using Gmail Layouts, Stripo, or HTML.

Which method do you need?

The right method depends on whether you are designing the email itself, changing one compose window, or updating the appearance of your mailbox.

 

Email design settings become part of the message recipients receive. Compose-window settings may affect a single message, while mailbox themes change only what the account owner sees in Gmail or Outlook.

Gmail Layouts are separate from Gmail Themes. On eligible Google Workspace plans, marketers can use Gmail Layouts to set layout colors, section backgrounds, themes, and colored frames that become part of the sent email.

How to change email background color in Stripo

Stripo lets you apply backgrounds at several levels, from the canvas around the email to an individual block. A background assigned to an inner element can visually cover the color applied behind it.

Set the general background color

The General Background Color fills the area around the main email content. It does not change the color inside stripes, structures, or containers.

To set it:

1. Open an email or template in the Stripo editor.
2. Go to General Styles.
3. Open Global Styles and Layout.
4. Find General Background Color.
5. Select a color or enter a color value.

This color is easiest to see when the email content is narrower than the available desktop screen. It fills the space to the left and right of the main content area.

Stripo displays the General Background Color on desktop but hides it on mobile. If your mobile design needs a colored background, apply the color directly to a stripe, structure, container, or supported block instead.

See how content width changes the visible background

Stripo uses a content width of 600 px by default. You can change it within a range of 320 to 900 px in General Styles.

Content width affects how much of the General Background Color appears around the email:

• a narrower content area leaves more of the background visible on desktop;
• a wider content area leaves less visible space around the content;
• a 900 px layout may cover most of the available preview width;
• changing the content width does not change the background color itself.

This setting controls the main email canvas, not the full-width stripes behind it. After changing the content width, preview the template to check whether text wrapping, image sizes, or container proportions have changed.

Set a background color for a stripe

A stripe is a full-width horizontal section of an email. Headers, content sections, footers, and info areas are built as separate stripe types in Stripo.

Each stripe can have two different background settings:

• Stripe Background Color fills the full-width area;
• Content Background Color fills the central content area inside the stripe.

To change either color:

1. Select the stripe in the editing area.
2. Open the Styles tab.
3. Set the stripe or content background color.
4. Check the results in desktop and mobile views.

General Styles can define default colors for Header, Content, Footer, and Info Area stripes. When you assign a different color directly to a stripe, that local setting overrides the default for the selected stripe only.

This makes it possible to keep a common background across most of the email while giving one section its own color.

Set structure, container, and block backgrounds

Inside each stripe, Stripo uses several nested layout levels:

Stripe → Structure → Container → Block

Inner elements are transparent by default. When an element remains transparent, the background behind it stays visible. Once you give that element its own color, it covers the background on the outer level.

For example, a structure can have a blue background while its containers remain transparent. Both containers will appear blue. If you give one container a white background, only that container will cover the structure’s background color.

The available background controls depend on the selected level:

• structures support background colors, images, and gradients;
• containers support background colors, images, and gradients;
• some blocks include a separate Block Background Color setting;
• a local background applies only to the selected element.

Settings applied directly to an element take priority over the default settings in General Styles. This lets you set common background colors first and then change individual sections without rebuilding the full design.

Add a gradient background

Stripo supports linear and radial gradients. 

Depending on the selected element, you can adjust:

• gradient type;
• color stops;
• color opacity;
• direction or angle for a linear gradient;
• the position of each color in the transition.

Gradient controls are available for:

• the general email background;
• stripes and stripe content;
• structures;
• containers.

Stripo stores a solid Background Color together with the gradient. Clients that support CSS gradients display the full transition. Clients that do not support CSS gradients ignore the gradient and show the solid color instead.

Stripo uses the first gradient color as the fallback. Choose the first color carefully, especially when the section contains text or buttons. The fallback must keep the content readable on its own.

CSS gradient support is lower than solid background-color support. Classic Outlook for Windows does not display standard CSS gradients, so recipients using those versions will see the fallback color.

Use a background image with a fallback color

Stripo lets you add a background image to:

• the whole email;
• a stripe;
• a structure;
• a container.

Available image controls may include position, repeat, size, and alignment. Set a solid background color at the same level as the image. This color appears if the image is blocked, fails to load, or is not supported by the recipient’s email client.

Outlook support depends on where you add the background image:

1. A whole-email background image added through General Styles → Global Styles and Layout can use Stripo’s Outlook-specific handling.
2. A background image assigned to an individual stripe, structure, or container through CSS may not appear in classic Outlook for Windows.

For individual sections, a solid fallback color is the safer choice for Outlook. Developers can use VML to display section background images in classic Outlook, but this requires custom code, fixed dimensions, and thorough testing. A VML background may also conflict with a bulletproof Outlook button in the same section.

The whole-email background image is displayed only on desktop in Stripo. It does not appear on mobile, so the mobile layout should remain clear without it.

Remove or reset a background color

To remove a background color assigned directly to an element:

1. Select the stripe, structure, container, or block.
2. Open its background color control.
3. Choose Transparent or No color, depending on the current interface label.
4. Check which background becomes visible behind the selected element.

Removing a local background color does not always make the area white. Instead, it makes that level transparent. The stripe, structure, container, or block behind it may have a different background color, gradient, or image that becomes visible after the local background is removed.

For example, removing a white container background may reveal the blue structure background underneath.

How to change background color in Outlook

Outlook separates a background added to an email from the Light or Dark appearance used while reading and writing. Page Color becomes part of the message, while Outlook appearance settings change only what you see in the application.

Change Page Color in classic Outlook

Microsoft documents Page Color for Outlook for Microsoft 365, Outlook 2024, and Outlook 2021.

To change the background of a new message:

1. Start a new message.
2. Open the Options tab.
3. Select Page Color.
4. Choose a color or select More Colors.
5. Select Fill Effects to add a gradient, texture, pattern, or picture.
6. Select No Color to remove the background.

The gradient, texture, or pattern uses the color selected before you open Fill Effects.

Page Color works well for individual messages. For marketing campaigns that must render consistently across Outlook, Gmail, Apple Mail, and mobile apps, create the design in Stripo or code it in HTML. This gives you more control over the layout, fallbacks, responsive behavior, and client testing.

Why Page Color may be missing in new Outlook

Microsoft’s current Page Color instructions describe the ribbon-based workflow used in classic desktop Outlook. New Outlook has separate settings for its application appearance and the background shown while reading or composing messages.

In new Outlook, you can:

• open Settings → General → Appearance to select Light, Dark, or the system setting;
• use the light/dark background button in the compose toolbar;
• select Light Reading Pane if you want the message area to remain light.

These controls change the Outlook view while you read or write emails. Microsoft documents them separately from the Page Color feature used to add a background to a message.

If Page Color is not present in your version, use one of these routes:

• switch to classic Outlook and follow the documented Options → Page Color workflow;
• build the email in Stripo or HTML, then send or export it through the required platform.

Remove or change a background on replies and forwards

A reply or forwarded message may keep the background or stationery used in the original email. 

You can replace or remove it before sending your response:

1. Open the message.
2. Select Reply, Reply All, or Forward.
3. Click inside the message body.
4. Open Options → Page Color.
5. Select a new color, Fill Effects, or No Color.

Fill Effects can apply a gradient, texture, or tiled picture. Selecting No Color removes the existing stationery or background from the reply or forward.

Removing the original background can make your response easier to read, especially when the source message uses a dark color, decorative stationery, or an image behind the text.

Background color in Gmail: What is actually possible

Gmail has three separate ways to work with color: interface themes, regular message formatting, and branded Gmail Layouts. Only Gmail Layouts add section backgrounds and theme colors to the email recipients receive.

Change the Gmail interface theme

A Gmail Theme changes the appearance of your inbox and message screens. It does not add the selected theme or photo to outgoing emails.

To change the theme on the desktop:

1. Open Gmail.
2. Select Settings.
3. Find Theme in Quick settings.
4. Select View all.
5. Choose a theme, Dark mode, or a photo.
6. Select Save.

Some themes also let you change the text background, darken the corners, or blur the background image. These changes remain part of your Gmail interface.

Add background colors with Gmail Layouts

Eligible Google Workspace accounts can create branded email layouts inside Gmail. 

The current list includes:

• Business Standard;
• Business Plus;
• Education Standard;
• Education Plus;
• Enterprise Standard;
• Enterprise Plus;
• Workspace Individual.

Gmail Layouts include controls for:

• default colors and fonts;
• individual section backgrounds;
• custom color palettes;
• reusable email themes;
• colored page frames;
• desktop, tablet, and mobile previews.

To add or change a background:

1. Open Compose in Gmail.
2. Select Layouts.
3. Choose a default layout or open one from My layouts.
4. Select Edit layout.
5. Point to a section and select Background, or create a theme from the right panel.
6. Preview the layout on desktop, tablet, and mobile.
7. Select Insert to add it to the Gmail compose window.

Themes can store custom colors, fonts, spacing, and page frames. You can also give individual sections their own styles or background photos.

Google warns that some Outlook versions may display Gmail Layouts differently because they use Microsoft Word to render HTML emails. Test the finished layout in Outlook if a significant portion of your audience uses it.

Know the limits of the regular Gmail composer

The regular Gmail composer includes tools for formatting text, but it does not include a Page Color setting for the full email canvas. Text formatting and full-email background design are separate tasks.

For an email with designed section or page backgrounds, use:

• Gmail Layouts on an eligible Workspace plan;
• an email builder such as Stripo;
• custom HTML delivered through an ESP or another sending system.

This distinction matters because Gmail can send an email with a designed background through Layouts or imported HTML. A Gmail interface theme cannot create the same result.

Coding email background color in HTML

HTML email still relies on table-based layouts because email clients process CSS in different ways. Tables and table cells give background colors a more predictable place in the code than web layouts built mainly with <div> elements.

Apply the color to tables and table cells

Place section background colors on <td> elements whenever possible. For a background that spans the available email width, apply the color to an outer wrapper table or its cell, then place the main content in a separate centered table.

A common structure uses:

• a 100% width outer table for the page background;
• an outer <td> for alignment and spacing;
• a centered inner table for the email content;
• separate <td> elements for section colors.

Do not rely only on a background applied to <body>. Some clients replace, ignore, or limit body-level styles. Litmus advises using tables and table cells for solid HTML email backgrounds.

Use six-digit HEX for email backgrounds

HTML and CSS accept several color formats:

• six-digit HEX, such as #F4F4F4;
• three-digit HEX, such as #FFF;
• RGB, such as rgb(244, 244, 244);
• named colors, such as white.

Use six-digit HEX values as the default for production email code. They are easy to copy between design tools, CSS, and older HTML attributes, and they avoid shorthand interpretation in older clients.

The deprecated bgcolor attribute accepts a six-digit HEX value or a color keyword. RGB and RGBA values belong in CSS rather than the HTML attribute.

RGBA colors and opacity work in many clients, but they are a weaker default for a background that carries text. Transparency exposes the color behind the section, and dark mode can change the final combination.

Combine inline CSS with bgcolor only where needed

The current CSS method is an inline background-color declaration:

<td style="background-color: #F4F4F4;">

Email developers sometimes pair it with the older bgcolor attribute:

<td bgcolor="#F4F4F4" style="background-color: #F4F4F4;">

The two values should match.

Their roles are different:

• style="background-color: ..." uses the current CSS property;
• bgcolor is a deprecated HTML attribute;
• bgcolor may be kept as a compatibility fallback in table-based email code;
• modern email code does not need both in every cell.

MDN marks bgcolor as deprecated and directs web developers to CSS. Email development may still retain it in selected table cells because email clients do not follow browser standards at the same pace.

Create a full-width background with a wrapper table

The following example creates a gray page background around a white 600 px content area:

<table

  role="presentation"

  width="100%"

  cellpadding="0"

  cellspacing="0"

  border="0"

  bgcolor="#F4F4F4"

  style="width: 100%; background-color: #F4F4F4;"

>

  <tr>

    <td align="center" style="padding: 24px 12px;">

      <table

        role="presentation"

        width="600"

        cellpadding="0"

        cellspacing="0"

        border="0"

        bgcolor="#FFFFFF"

        style="width: 100%; max-width: 600px; background-color: #FFFFFF;"

      >

        <tr>

          <td style="padding: 32px; font-family: Arial, sans-serif;">

            Email content

          </td>

        </tr>

      </table>

    </td>

  </tr>

</table>

In this code:

• the outer table creates the full-width #F4F4F4 background;
• the inner table limits the main email content to 600 px;
• the inner #FFFFFF color creates a separate content surface;
• width: 100% lets the inner table shrink on narrow screens;
• role="presentation" tells assistive technologies that the tables control layout rather than display tabular data.

The outer wrapper remains full width while the inner table becomes narrower on mobile screens. The amount of background visible around the content changes with the available screen width.

Add gradients and background images with a solid fallback

Gradients

Place a solid color before the gradient declaration:

<td

  style="

    background-color: #2E3A8C;

    background-image: linear-gradient(135deg, #2E3A8C 0%, #7B61FF 100%);

  "

>

The solid color acts as the fallback. A client that supports linear-gradient() displays the transition; a client that does not support it ignores the gradient and displays #2E3A8C instead.

CSS gradient support is much lower than solid background-color support. Current client data shows no normal CSS linear-gradient support in classic Outlook for Windows and several Yahoo Mail environments.

Choose the fallback color before placing text over the section. The text, buttons, and icons must remain readable when the gradient is unavailable.

Background images

Apply a background image to a containing <td> and place a solid color behind it:

<td

  bgcolor="#1F2937"

  background="https://example.com/background.jpg"

  style="

    background-color: #1F2937;

    background-image: url('https://example.com/background.jpg');

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

  "

>

Set the image position, repeat behavior, and size based on the image and the content. Treat the image as a visual layer rather than the only source of text or key information.

Classic Outlook for Windows needs VML for many section background-image cases. VML uses fixed dimensions and code written for the specific stripe, structure, or container. A section whose text becomes taller can be clipped, and a VML background may conflict with a VML-based bulletproof button in the same section.

Do not add VML as a generic snippet without testing the complete section. Check the background, content height, fallback font, container widths, and every Outlook button together.

Why is your background color not showing

Most background problems come from email client support, element layering, mobile settings, dark mode, or HTML changes made after export.

It disappears in a specific email client

Start by identifying the type of background used in the design. Solid colors, CSS gradients, and background images rely on different properties and have different levels of email client support.

Use this diagnostic order:

1. Check whether the design uses a solid color, gradient, or background image.
2. Check whether the recipient’s email client supports the specific CSS property.
3. Confirm that the element has a solid fallback color.
4. Check whether an inner container or block has its own background and covers the parent layer.
5. Compare the exported HTML with the code delivered by the ESP.
6. Test the received email instead of relying only on a browser or editor preview.

Solid background colors work in most current email clients. CSS gradients have lower support, so unsupported clients may display only the fallback color.

Classic Outlook for Windows also has specific limitations:

• solid background colors normally display;
• CSS gradients may be replaced by the solid fallback;
• background images assigned to stripes, structures, and containers may disappear;
• a whole-email background image added through Stripo General Styles uses separate Outlook-specific handling.

If a section background image disappears in Outlook, the fallback color should keep the content readable. When neither the image nor the expected color appears, check whether another container covers it or whether the sending platform changed the HTML.

Dark mode changed the background color

Email clients use different algorithms to display emails in dark mode. The final result is controlled by the recipient’s app and device settings.

Depending on the client, dark mode may:

• leave the original email colors unchanged;
• replace light backgrounds while keeping darker sections;
• change both the background and text colors;
• turn the original color into black, gray, blue, green, or another calculated shade.

This behavior can also create new problems. A dark logo may disappear against a changed background, a button may lose contrast, or light edges around an image may become visible.

Use Stripo to check the main risks before sending:

1. Switch to Dark Mode in the editing area or Preview.
2. Check text contrast across all colored sections.
3. Review buttons, logos, icons, and the edges of transparent images.
4. Compare desktop and mobile previews.
5. Send test emails to the email clients most commonly used by your audience.

Stripo Dark Mode Preview is an approximation. Gmail, Outlook, Apple Mail, and other clients may apply different colors and contrast adjustments to the delivered email.

It does not show on mobile

First, check where the background was applied.

Stripo hides the General Background Color around the main email content on mobile. A whole-email background image set through General Styles is also displayed only on desktop.

Background colors applied directly to a stripe, structure, container, or supported block normally remain visible on mobile. Background images have more client-specific limitations, and responsive CSS or ESP processing may change their size, position, or visibility.

Run this check:

1. Apply a clearly visible color directly to the stripe, structure, or container.
2. Switch between desktop and mobile modes in Stripo.
3. Open Preview and check both versions.
4. Send test emails to iOS and Android inboxes.

Solid background-color has broad mobile support. Do not assume that a background image or gradient will behave in the same way.

Best practices for email background colors

Use this checklist when adding colors, gradients, or images to an email:

• use a solid background color behind content that must remain readable;
• add a solid fallback behind every gradient and background image;
• use six-digit HEX values in production email code;
• keep text, button, and link contrast readable in light and dark modes;
• do not depend on the General Background Color for the mobile design;
• treat background images as decoration, not as the only place containing text or key information;
• choose a fallback close to the dominant image or gradient color;
• check whether a container or block covers the background applied behind it;
• test the exported email in the clients used by the target audience;
• repeat the tests after export to the ESP, since the platform may process or change the HTML.

For a cleaner Stripo workflow:

1. Set the default colors in General Styles.
2. Add local backgrounds only to the sections that need a different color.
3. Check desktop and mobile views.
4. Review the design in Dark Mode Preview.
5. Send test emails to real inboxes.

This order keeps common settings in one place and reduces the number of local overrides that need to be checked later.

Wrapping up

The right method depends on where the background belongs. Use Stripo for marketing email design, Page Color for individual messages in classic Outlook, Gmail Layouts for eligible Workspace campaigns, and inline HTML/CSS for custom-coded emails. Solid background colors provide the most reliable foundation, while gradients and background images should always have a readable fallback.

Stripo gives marketers control over the whole email canvas, stripes, structures, containers, and supported blocks without requiring manual HTML edits. Set the main colors in General Styles, customize individual sections as needed, and test the result across desktop, mobile, dark mode, and real inboxes.

FAQ

1. Can I change the background color of an email in Gmail?

Gmail Themes change the mailbox interface, not the background of a sent email. The regular Gmail composer has no full-message Page Color control, but eligible Google Workspace accounts can use Gmail Layouts to add section backgrounds, themes, and color frames. For other campaigns, create the design in Stripo or send custom HTML through an ESP.

2. Why did my email background turn black or blue?

The recipient’s email client probably changed the color in dark mode. Gmail, Outlook, Apple Mail, and other clients use different rules to process backgrounds and text. Check the design in Stripo Dark Mode Preview, then send test emails to real inboxes used by your audience.

3. Where is Page Color in new Outlook?

Microsoft’s current Page Color instructions use the ribbon in classic desktop Outlook. The appearance and dark mode controls in new Outlook change the application or compose view rather than adding a designed background to the email. Use classic Outlook for the documented Page Color workflow, or create the message in Stripo or HTML.

4. What is the best HEX format for email backgrounds?

Use a six-digit HEX value such as #FFFFFF. Three-digit HEX and RGB work in many clients, but six-digit HEX is a safer default for email CSS and older HTML attributes. When using both background-color and bgcolor, assign the same value to each.

5. Does the background color show on mobile?

Background colors applied directly to stripes, structures, containers, and supported blocks generally remain visible on mobile. Stripo hides the General Background Color around the email content on mobile, and the whole-email background image is displayed only on desktop. Test CSS gradients and background images separately because their mobile support differs from that of solid background colors.

6. Can I use a background image instead of a color?

Yes, but add a solid fallback color behind it. The image may be blocked, fail to load, or disappear in email clients that do not support the required CSS property, including classic Outlook for Windows in many section-level cases. Keep key text and information as HTML content rather than placing the only copy inside the image.