La versión corta
- Un fondo de degradado en un correo debe construirse siempre por capas: primero un color de fondo sólido, encima un degradado CSS y, donde los degradados CSS no se muestran, una versión con imagen o VML.
- Los clientes de correo difieren en cuánto CSS admiten, y el soporte cambia de una versión a otra, así que prueba en las bandejas que usan realmente tus lectores.
- El Outlook clásico para Windows renderiza el correo con Word e ignora los degradados CSS, pero puede dibujar un degradado sencillo de dos colores con VML.
- El modo oscuro puede cambiar los colores del texto y dejar intacto un degradado, así que diseña cabeceras que se lean bien si se altera cualquiera de los dos.
En esta página
Un fondo de degradado en un correo funciona cuando lo construyes por capas. Todos los clientes muestran un color de fondo sólido, muchos clientes modernos renderizan además un degradado CSS encima y el Outlook clásico para Windows necesita una forma VML o una imagen. Si las capas están bien, cada lector ve algo que parece deliberado, aunque no sea el degradado completo.
El correo no es un navegador. Cada bandeja elimina, reescribe o ignora un CSS distinto, y cada una se actualiza a su ritmo. Esta guía cubre lo que es fiable, el código de reserva y cómo mantener legible el texto cuando entra el modo oscuro. Para la ilustración de la cabecera en sí, mira el diseño de cabeceras de correo.
Qué clientes de correo muestran degradados CSS
El soporte se divide en tres grupos. Los clientes basados en motores de navegador tienden a renderizar los degradados CSS con fidelidad. El Outlook clásico para Windows usa Microsoft Word para maquetar el correo y los ignora por completo. Los correos web y las apps de móvil están en un punto intermedio: lo que conservan depende de la app, del tipo de cuenta y de cómo esté escrito el CSS.
| Cliente | Degradado CSS | En qué confiar |
|---|---|---|
| Apple Mail en Mac, iPhone e iPad | Suele renderizarlo | El degradado CSS, con un color sólido detrás |
| Outlook clásico para Windows | Ignorado | Un color sólido, o VML para un degradado sencillo |
| El nuevo Outlook para Windows y Outlook en la web | Varía | Prueba y haz que el color sólido tenga sentido |
| Gmail en la web y en sus apps | Varía | Prueba con los tipos de cuenta que usan tus lectores |
| Otros correos web y apps de móvil | Varía | El color sólido es lo único que muestran todos los clientes |
La pila de reserva, en código
Pon el degradado en una celda de tabla, porque el diseño con tablas es lo que entienden todos los clientes. Declara el color tres veces, del más antiguo al más nuevo: el atributo bgcolor, luego background-color en el estilo en línea y, por último, el degradado como background-image. Un cliente que no entienda el degradado descarta esa declaración y conserva el color.
<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><style>.linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #db2777 100%)Elige la reserva con cuidado. Es la versión que verán muchos lectores, así que debe sostener el texto blanco u oscuro tan bien como el degradado. Tomar un color del medio de la mezcla suele funcionar. Compruébalo con tu color de texto según las reglas del contraste de color, 4,5:1 para el texto normal.
Degradados en el Outlook clásico con VML
El Outlook clásico de Windows aún entiende VML, un viejo formato vectorial de Microsoft. Envuelto en un comentario condicional que solo lee Outlook, un rectángulo VML puede pintar un degradado de dos colores detrás de tu contenido. Todos los demás lo saltan.
<!--[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]-->Los degradados VML son toscos: dos colores, tamaños fijos y poco control. Muchos equipos deciden que el esfuerzo no compensa y dejan que el Outlook clásico muestre el color sólido. Es un resultado perfectamente bueno si el color sólido se eligió bien.
Usar una imagen en vez de un degradado CSS
La otra vía es exportar el degradado, a menudo con el titular dentro, como imagen. Todo cliente que muestre imágenes la mostrará igual, y puede llevar grano, textura y rotulación que el CSS no puede. Las contrapartidas son que algunos lectores solo ven las imágenes tras permitirlas, que las lectoras de pantalla y los buscadores no pueden leer las palabras de la imagen y que el archivo añade peso.
Cabecera de correo
1200 × 600
Firma de correo
600 × 200
Degradado CSS
- El texto sigue siendo real, legible y traducible
- Casi no pesa
- Se muestra incluso con las imágenes bloqueadas
- Necesita reservas y varía según el cliente
Imagen de degradado
- Se ve igual dondequiera que carguen las imágenes
- Puede llevar grano, textura y rotulación
- Pon también las palabras clave en texto real y describe la imagen en el texto alternativo
- Añade peso; la compresión JPEG fuerte causa bandas
Un camino intermedio habitual: el degradado como imagen de fondo de la celda, con un color sólido a juego detrás y el titular como texto real encima. Si exportas una imagen de degradado, guárdala como PNG o como JPEG de alta calidad. Los degradados suaves son justo donde la compresión se ve como rayas; las bandas en degradados explican la solución.
Degradados en correos y modo oscuro
El modo oscuro es donde más a menudo se rompen los correos con degradado. Algunos clientes dejan tus colores en paz, otros solo cambian los fondos claros y el texto oscuro, y otros ajustan todo. Un degradado en background-image suele quedar intacto mientras se cambian los colores del texto, lo que puede dejar texto oscuro sobre un degradado oscuro.
Una cabecera oscura con texto claro casi no cambia en modo oscuro…
…mientras que una cabecera clara con texto oscuro es lo que reescribe el modo oscuro.
- 1
Diseña primero la cabecera oscura
Un degradado profundo con texto claro es justo lo que quiere el modo oscuro, así que los clientes tienen poco que cambiar. Mira el diseño para modo oscuro para los principios generales.
- 2
Declara la compatibilidad con esquemas de color
Añade
<meta name="color-scheme" content="light dark">y da estilo a una versión oscura dentro de@media (prefers-color-scheme: dark)para los clientes que lo respetan. - 3
Pon el texto en HTML real, no solo en la imagen
El cliente puede ajustar el texto real; las palabras integradas en una imagen no, y desaparecen si las imágenes están desactivadas.
- 4
Prueba en las apps reales
Envía correos de prueba a los clientes que usa realmente tu lista, con los ajustes claro y oscuro, antes de enviarlo a todos.
Detrás de todo esto hay un principio de poner texto sobre un degradado: las palabras deben leerse sobre la parte más oscura y la más clara del fondo, y sobre el color de reserva. Si lo hacen, el correo aguanta lo que decida hacer la bandeja de entrada.
Preguntas frecuentes
¿Funcionan los degradados CSS en el correo?
En algunos clientes. Apple Mail suele renderizarlos, el Outlook clásico para Windows los ignora y los correos web y las apps de móvil varían, así que pon siempre un color de fondo sólido detrás del degradado.
¿Cómo añado un fondo de degradado en Outlook?
El Outlook clásico para Windows ignora los degradados CSS, pero puede dibujar un degradado sencillo de dos colores con un rectángulo VML dentro de un comentario condicional. Muchos remitentes simplemente dejan que muestre el color sólido de reserva.
¿Admite Gmail los fondos de degradado?
Depende de la app de Gmail, del tipo de cuenta y de cómo esté escrito el CSS, y puede cambiar. Construye el degradado con un color sólido de reserva y prueba en las apps de Gmail que usan tus lectores.
¿Qué tamaño debe tener la imagen de cabecera de un correo?
Diséñala a 1200 × 600 píxeles y muéstrala a 600 píxeles de ancho, para que siga nítida en pantallas de alta densidad.
¿Por qué mi cabecera de correo se ve mal en modo oscuro?
Algunos clientes cambian los colores del texto en modo oscuro pero dejan intactos las imágenes de fondo y los degradados. Diseñar la cabecera como un degradado oscuro con texto claro real evita la mayor parte del problema.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
