# Gráficos para Cyber Monday: un estilo para la oferta online

[Canonical HTML page](https://gradiently.design/es/guide/cyber-monday-graphics)

El Cyber Monday ocurre casi por completo en pantallas, bandejas de entrada y páginas de pago. Sus gráficos tienen una tarea distinta a la del Black Friday, y merecen un estilo propio, más frío.

## The short version

- Los gráficos de Cyber Monday funcionan mejor con una paleta fría y digital, claramente emparentada con tu estilo de Black Friday pero visiblemente distinta.
- Como el Cyber Monday es una oferta online, el banner de la web y la cabecera del correo importan tanto como los posts en redes.
- Cada gráfico de Cyber Monday debe llevar a una sola acción, normalmente un enlace, y decir con claridad cuándo termina la oferta.
- Un banner web estrecho necesita una sola frase corta, porque se lee en menos de un segundo de camino a otra cosa.
- Azules eléctricos, cianes y violetas sobre un fondo casi negro se leen como digitales sin necesidad de circuitos ni efectos glitch.

Los mejores **gráficos para Cyber Monday** se ven inconfundiblemente digitales y señalan un destino: una paleta fría y eléctrica sobre fondo oscuro, una frase corta y un enlace. El Cyber Monday es la oferta online, así que el trabajo no se limita a posts en redes. Es el banner de tu web, la cabecera del correo que llega esa mañana y la vista previa del enlace cuando alguien lo comparte. Haz todo con un mismo estilo y el día se sentirá como un evento y no como una repetición del viernes.

## En qué se diferencia el Cyber Monday del Black Friday

El Black Friday nació como un día de tienda física, y su imagen aún toma prestado de los escaparates: colores cálidos, grandes carteles. El Cyber Monday se bautizó por las compras online, y la mayoría de sus gráficos se ven en un móvil un segundo antes de un toque. Eso cambia tres cosas.

### Black Friday

- Fondos cálidos, oro y brasa
- Construido en torno al anuncio
- Mandan los posts de feed y las stories
- Puede durar varios días

### Cyber Monday

- Fondos fríos, azul eléctrico y cian
- Construido en torno al clic
- Mandan el correo, el banner web y las vistas previas de enlaces
- Normalmente un solo día, así que la urgencia es real

Si hiciste una secuencia de Black Friday, mantén la tipografía, el diseño y la voz, y cambia la temperatura. La gente debe reconocerte al instante y ver aun así que ha empezado algo nuevo. [Posts de Black Friday para redes sociales](https://gradiently.design/es/guide/black-friday-post-ideas) prepara esa primera mitad.

## Colores y paletas para Cyber Monday

Lo digital no necesita placas de circuitos, efectos glitch ni código binario de fondo. El color lo logra solo. Una luz que parece salir de una pantalla, en azul, cian o violeta, sobre un fondo tinta profundo, se lee como online al instante. Mantén un solo acento y deja que el resto siga oscuro.

- Azul pantalla: `radial-gradient(circle at 70% 25%, #38bdf8 0%, #0c4a6e 38%, #050b14 78%)`
- Brillo cian: `radial-gradient(circle at 25% 70%, #22d3ee 0%, #164e63 40%, #04101a 80%)`
- De índigo a cian: `linear-gradient(135deg, #0b1026 0%, #3730a3 50%, #22d3ee 100%)`
- Violeta eléctrico: `radial-gradient(circle at 80% 80%, #a855f7 0%, #3b0764 40%, #0a0614 80%)`

Cuatro fondos para Cyber Monday. Cada uno combina una base casi negra con un color de luz de pantalla.

- Tinta: #050b14
- Azul profundo: #0c4a6e
- Azul pantalla: #38bdf8
- Texto hielo: #e0f2fe
- Oro del viernes: #d4a24c

Una paleta que da relevo al Black Friday: el acento dorado se queda, en pequeño, mientras el fondo se vuelve azul.

El neón emociona en un móvil oscuro y resulta horrible cuando vibra contra sí mismo. [Degradados neón](https://gradiently.design/es/guide/neon-gradients) explica cómo mantener limpios los colores brillantes, y [paletas de colores ciberpunk](https://gradiently.design/es/guide/cyberpunk-colors) va más lejos si tu marca lo soporta.

## Banner de Cyber Monday para tu web

Un banner web se lee de camino a otra cosa, así que recibe una frase corta y un plazo. La franja fina sobre la navegación es la versión menos intrusiva y funciona en todas las páginas. Aquí tienes una en CSS sencillo, con un color de reserva por si el degradado no carga y un texto que se mantiene claro en cada parte.

```html
<div class="cm-banner" role="region" aria-label="Cyber Monday sale">
  <a href="/sale">Cyber Monday: 25% off everything, today only</a>
</div>

<style>
  .cm-banner {
    background-color: #050b14;
    background-image: linear-gradient(90deg, #050b14 0%, #0c4a6e 50%, #050b14 100%);
    text-align: center;
    padding: 10px 16px;
  }
  .cm-banner a {
    color: #e0f2fe;
    font: 600 15px/1.4 system-ui, sans-serif;
    text-decoration: none;
  }
</style>
```

Una franja de anuncio fina. El color más oscuro está en ambos extremos y la luz solo en el centro, para que el texto pálido conserve el contraste.

Para una portada completa en lugar de una franja, diseña a 1920×1080 y mantén las palabras en el tercio izquierdo o central, donde sobreviven al recorte en pantallas más pequeñas. [Fondos de portada para webs](https://gradiently.design/es/guide/website-hero-background) trata tamaños y rendimiento.

## Diseño de correo para Cyber Monday

Para muchas tiendas, el correo de Cyber Monday es el gráfico más importante del día. La cabecera mide 1200×600, y en un móvil la primera pantalla de un correo suele mostrar poco más que eso, así que la oferta debe ir en su mitad superior. Mantén las palabras como texto vivo en el correo siempre que puedas, y usa la imagen de cabecera para el ambiente y el titular.

Cabecera de correo ancha de Cyber Monday con un degradado azul y el texto «Solo hoy, 25% de descuento»

Una cabecera de correo de 1200×600: la oferta en la mitad superior, donde todas las bandejas la muestran.

- El asunto y la cabecera deben decir lo mismo con las mismas palabras.
- Pon un solo botón bajo la cabecera, no cinco.
- Escribe el plazo con zona horaria, sobre todo si vendes al extranjero.
- Revisa la cabecera en modo oscuro, donde algunas bandejas cambian los colores a su alrededor.

[Diseño de cabeceras de correo](https://gradiently.design/es/guide/email-header-design) tiene más sobre tamaños y rarezas del modo oscuro.

## Posts y stories de Cyber Monday

En redes, el Cyber Monday es corto, así que bastan dos o tres posts: un lanzamiento por la mañana, una story recordatorio a mediodía y una última llamada por la tarde. Cada uno debe enviar a la gente al enlace, así que deja espacio en las stories para la pegatina de enlace.

Post vertical de oferta de Cyber Monday con un degradado azul eléctrico y la oferta en letra grande

El post de la mañana: ocasión, oferta y plazo.

Story vertical con la cuenta atrás de las últimas seis horas de una oferta de Cyber Monday

La story de la tarde, con espacio debajo para la pegatina de enlace.

| Gráfico | Tamaño | Nota |
| --- | --- | --- |
| Post de Instagram | 1080×1350 | Lanzamiento por la mañana |
| Story | 1080×1920 | Recordatorios con pegatina de enlace |
| Cabecera de correo | 1200×600 | Oferta en la mitad superior |
| Portada web | 1920×1080 | Palabras en el tercio central |
| Vista previa del enlace | 1200×630 | Se muestra al compartir la página de la oferta |

Todo lo que necesita una oferta online de un día, en un solo estilo.

Haz todo esto la semana anterior, no el lunes por la mañana. Ese día querrás vigilar los pedidos y responder mensajes, y el único cambio de diseño que debería quedar es sustituir «Quedan seis horas» por «Queda una hora» en la última story.

> **Retíralo a tiempo** Cuando acabe la oferta, quita el banner, cambia la vista previa del enlace y archiva las stories. Un banner de Cyber Monday todavía visible el miércoles hace que el plazo parezca que nunca fue real, y el del año que viene se creerá un poco menos.

La vista previa del enlace es la que todo el mundo olvida. Cuando alguien comparte la página de tu oferta, esa imagen es el gráfico que ven sus amigos, así que prepárala para el día. [Tamaño de imagen Open Graph](https://gradiently.design/es/guide/open-graph-image-size) explica cómo. Con Pro, Gradiently adapta un diseño terminado a todos estos formatos de una vez, y el fondo mantiene su zona más tranquila detrás de las palabras en cada tamaño.

## FAQ

### ¿Cuándo es el Cyber Monday?

El Cyber Monday es el lunes posterior a Acción de Gracias en Estados Unidos, así que siempre sigue al fin de semana del Black Friday. Muchas tiendas mantienen una oferta de viernes a lunes y cambian el estilo para el último día.

### ¿Qué colores van bien en los gráficos de Cyber Monday?

Los colores fríos, de pantalla, como el azul eléctrico, el cian y el violeta sobre un fondo casi negro se leen como digitales y distinguen el día del Black Friday.

### ¿Qué tamaño tiene una cabecera de correo de Cyber Monday?

1200×600 píxeles es un tamaño fiable. Mantén la oferta en la mitad superior, porque es lo primero que se ve en un móvil.

### ¿Deben coincidir los gráficos de Cyber Monday con los de Black Friday?

Mantén la misma tipografía, diseño y voz para que la gente te reconozca, y cambia la temperatura del color para que el nuevo día se sienta nuevo.

### ¿Qué debe decir un banner de Cyber Monday en la web?

Una frase corta con la oferta y el plazo, enlazada a la página de la oferta. Un banner se mira de reojo, no se lee.
