Gradiente em e-mail: o que funciona no Gmail e no Outlook

Um fundo com gradiente em e-mail funciona quando você o monta em camadas. Todo cliente mostra uma cor de fundo sólida, muitos clientes modernos também renderizam um gradiente CSS por cima dela, e o Outlook clássico para Windows precisa de uma forma VML ou de uma imagem. Acerte as camadas e cada leitor vê algo com cara de deliberado, mesmo que não seja o gradiente completo.

E-mail não é um navegador. Cada caixa de entrada remove, reescreve ou ignora um CSS diferente, e cada uma se atualiza no próprio ritmo. Este guia trata do que é confiável, do código de reserva e de como manter o texto legível quando o modo escuro entra em cena. Para a arte do cabeçalho em si, veja design de cabeçalho de e-mail.

Quais clientes de e-mail mostram gradientes CSS

O suporte se divide em três grupos. Clientes construídos sobre motores de navegador tendem a renderizar gradientes CSS com fidelidade. O Outlook clássico para Windows usa o Microsoft Word para montar o e-mail e os ignora por completo. Webmails e apps de celular ficam no meio: o que mantêm depende do app, do tipo de conta e de como o CSS é escrito.

A pilha de reserva, em código

Ponha o gradiente em uma célula de tabela, porque o layout em tabela é o que todo cliente entende. Declare a cor três vezes, da mais antiga para a mais nova: o atributo bgcolor, depois background-color no estilo inline e, por fim, o gradiente como background-image. Um cliente que não entende o gradiente descarta essa declaração e fica com a cor.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td class="hero" bgcolor="#4c1d95"
        style="background-color:#4c1d95;
               background-image:linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #db2777 100%);
               padding:48px 32px;">
      <h1 style="margin:0; font-family:Arial, Helvetica, sans-serif;
                 font-size:32px; line-height:40px; color:#ffffff;">
        The autumn edit is here
      </h1>
    </td>
  </tr>
</table>

Escolha a reserva com cuidado. Ela é a versão que muitos leitores realmente verão, então deve sustentar o texto branco ou escuro tão bem quanto o gradiente. Tirar uma cor do meio da mistura costuma funcionar. Confira-a contra a cor do texto com as regras de contraste de cor, 4,5:1 para texto corrido.

Gradientes no Outlook clássico com VML

O Outlook clássico no Windows ainda entende VML, um formato vetorial antigo da Microsoft. Envolto em um comentário condicional que só o Outlook lê, um retângulo VML pode pintar um gradiente de duas cores atrás do seu conteúdo. Todos os outros o ignoram.

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
        style="width:600px; height:240px;">
  <v:fill type="gradient" color="#1e1b4b" color2="#db2777" angle="135" />
  <v:textbox inset="0,0,0,0">
<![endif]-->

  <!-- your table cell content goes here -->

<!--[if gte mso 9]>
  </v:textbox>
</v:rect>
<![endif]-->

Os gradientes VML são rudimentares: duas cores, tamanhos fixos e pouco controle. Muitas equipes decidem que o esforço não vale a pena e deixam o Outlook clássico mostrar a cor sólida. É um resultado perfeitamente bom se a cor sólida foi bem escolhida.

Usar uma imagem em vez de um gradiente CSS

O outro caminho é exportar o gradiente, muitas vezes com o título dentro, como imagem. Todo cliente que mostra imagens vai mostrá-la de forma idêntica, e ela pode levar grão, textura e lettering que o CSS não consegue. As desvantagens são que alguns leitores só veem imagens depois de permiti-las, as palavras da imagem não podem ser lidas por leitores de tela nem por buscadores, e o arquivo aumenta o peso.

Cabeçalho de e-mail

1200 × 600

Assinatura de e-mail

600 × 200

Um caminho do meio comum: o gradiente como imagem de fundo da célula, com uma cor sólida correspondente atrás e o título como texto de verdade por cima. Se você exportar uma imagem de gradiente, salve em PNG ou em JPEG de alta qualidade. Gradientes suaves são exatamente onde a compressão aparece como listras; banding em gradientes explica a correção.

Gradientes em e-mail e modo escuro

O modo escuro é onde os e-mails com gradiente mais quebram. Alguns clientes deixam suas cores em paz, outros só trocam fundos claros e textos escuros, e outros ajustam tudo. Um gradiente em background-image muitas vezes fica intacto enquanto as cores do texto mudam, o que pode pôr texto escuro sobre um gradiente escuro.

1. 1

   Projete primeiro o cabeçalho escuro

   Um gradiente profundo com texto claro já é o que o modo escuro quer, então os clientes têm pouco a mudar. Veja design para modo escuro para os princípios mais amplos.

2. 2

   Declare o suporte a esquemas de cor

   Adicione <meta name="color-scheme" content="light dark"> e estilize uma versão escura dentro de @media (prefers-color-scheme: dark) para os clientes que a respeitam.

3. 3

   Ponha o texto em HTML vivo, não só na imagem

   O texto vivo pode ser ajustado pelo cliente; as palavras embutidas em uma imagem não podem, e somem quando as imagens estão desligadas.

4. 4

   Teste nos apps reais

   Envie e-mails de teste para os clientes que a sua lista realmente usa, nas configurações clara e escura, antes de enviar a todos.

Por trás de tudo isso está um princípio de texto sobre gradiente: as palavras devem se ler contra a parte mais escura e a mais clara do fundo, e contra a cor de reserva. Se isso acontece, o e-mail se sustenta, faça a caixa de entrada o que fizer.