# Degradado rosa y azul: del algodón de azúcar al neón

[Canonical HTML page](https://gradiently.design/es/guide/pink-blue-gradient)

El rosa y el azul están algo lejos para mezclarse en piloto automático. Cuida bien el centro y tendrás cielos de algodón de azúcar o letreros de neón; descúidalo y saldrá una mancha lila apagada.

## The short version

- Un degradado rosa y azul mezcla rosas como #f9a8d4 o #ec4899 con azules como #93c5fd o #3b82f6, normalmente pasando por lila o violeta en el centro.
- Como el rosa y el azul no son vecinos directos, una mezcla directa entre ellos puede quedar grisácea en el centro, y una parada lila o violeta lo arregla.
- Las mezclas de rosa y azul pálidos parecen algodón de azúcar y piden tinta oscura, mientras que el rosa saturado y el cian sobre casi negro parecen neón.
- Ni el rosa intenso ni el azul medio sostienen bien el texto blanco pequeño, así que reserva el blanco para titulares grandes o fondos oscuros.
- El rosa y el azul van bien con baby showers, tiendas de dulces, creadores, videojuegos y estéticas retro como el vaporwave y el Y2K.

Un **degradado rosa y azul** mezcla un rosa como `#f9a8d4` o `#ec4899` con un azul como `#93c5fd` o `#3b82f6`. Los dos están algo lejos en el círculo cromático para mezclarse limpios por defecto, así que las mejores versiones pasan por una parada lila o violeta en el medio. Si mantienes la pareja pálida, sale algodón de azúcar; si la saturas sobre un fondo oscuro, sale neón. Los códigos de abajo cubren todo ese rango, con la solución para el centro y los colores de texto que funcionan.

## Por qué un degradado rosa y azul se vuelve gris en el centro

Los navegadores mezclan los colores del degradado en sRGB por defecto, y entre un rosa cálido y un azul frío esa mezcla puede perder saturación y verse algo gris o polvorienta. No es tan dramático como mezclar opuestos, pero se nota, sobre todo en mezclas pastel. La solución es nombrar tú mismo el medio: añade una parada lila o lavanda azulada para que cada punto de la mezcla se mantenga nítido.

- Dos paradas, mezcla por defecto: `linear-gradient(90deg, #f472b6 0%, #60a5fa 100%)`
- Con puente violeta: `linear-gradient(90deg, #f472b6 0%, #c084fc 50%, #60a5fa 100%)`

El mismo rosa y azul, con y sin parada puente. El segundo se mantiene saturado en el centro. [Degradados sucios](https://gradiently.design/es/guide/muddy-gradients) explica la ciencia del color.

En CSS también puedes escribir `linear-gradient(90deg in oklch, #f472b6, #60a5fa)`, que mantiene parejas la luminosidad y la saturación a lo largo de la mezcla. La parada puente funciona en todas partes, eso sí, y te da control sobre qué lila aparece exactamente.

## Degradados de algodón de azúcar: rosa y azul pastel

Un rosa pálido que se funde con un azul bebé resulta dulce, ligero y algo nostálgico. Deja un lila suave o un crema entre ellos, y usa para las palabras un pizarra oscuro en lugar de blanco.

- Algodón de azúcar: `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`
- Mantita de bebé: `linear-gradient(180deg, #fce7f3 0%, #e0f2fe 100%)`
- Nube de azúcar: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #ddd6fe 45%, #a5f3fc 100%)`
- Mañana de melocotón: `linear-gradient(160deg, #fff7ed 0%, #fbcfe8 40%, #c7d2fe 100%)`

Mezclas de rosa y azul pastel. Cada una lleva un paso lila, lavanda azulada o crema, así que nada del centro se vuelve polvoriento.

Para más de esta paleta suave, [degradados pastel](https://gradiently.design/es/guide/pastel-gradients) y [paletas de colores pastel](https://gradiently.design/es/guide/pastel-color-palettes) van más allá.

> **Imprimir rosa y azul pastel** Las mezclas muy pálidas casi pueden desaparecer en papel sin estucar, y los azules brillantes de pantalla suelen imprimirse más apagados. Intensifica un poco cada parada en invitaciones y folletos, y pide una prueba. [Degradados en impresión](https://gradiently.design/es/guide/print-gradients) cubre los detalles.

## Cielo y sorbete: rosa y azul más vivos

Sube un poco la saturación y la pareja se vuelve soleada y juguetona: un cielo de verano al final del día, un puesto de sorbetes, un cartel de fiesta en la piscina. Siguen pareciendo amables y no estridentes.

- Cielo de tarde: `linear-gradient(180deg, #7dd3fc 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Sorbete: `linear-gradient(120deg, #f472b6 0%, #a78bfa 50%, #38bdf8 100%)`
- Fiesta en la piscina: `radial-gradient(circle at 80% 80%, #fda4af 0%, #a5b4fc 45%, #7dd3fc 100%)`

Degradados rosa y azul de saturación media. Ideales para promociones de verano y contenido de creadores.

## Degradados rosa y azul neón

El rosa intenso y el cian eléctrico sobre casi negro son la firma del vaporwave, el synthwave y buena parte del diseño de videojuegos. El fondo oscuro no es opcional: es lo que hace brillar los colores. Mantén el neón en franjas, bordes o resplandores y deja oscuro casi todo el encuadre. [Degradados neón](https://gradiently.design/es/guide/neon-gradients) y [colores synthwave](https://gradiently.design/es/guide/synthwave-colors) tratan el estilo a fondo.

- Conducción nocturna: `linear-gradient(180deg, #0b0720 0%, #3b0764 55%, #ec4899 100%)`
- Letrero de neón: `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`
- Lámpara rosa, bruma cian: `radial-gradient(ellipse at 20% 80%, #f0abfc 0%, #7e22ce 30%, #155e75 60%, #0b0720 85%)`
- Amanecer de recreativa: `conic-gradient(from 180deg at 50% 100%, #06b6d4, #8b5cf6, #ec4899, #06b6d4)`

Rosa y azul neón. El rosa pálido y el cian son excelentes colores de texto sobre las zonas oscuras.

## Colores de texto sobre degradados rosa y azul

Los dos extremos de un degradado rosa y azul pastel son claros, así que el texto pizarra oscuro se lee en toda la superficie, lo que la convierte en una de las parejas más fáciles para componer texto. Las versiones saturadas son más difíciles: el rosa intenso y el azul medio son demasiado claros para texto blanco pequeño. Los valores de abajo usan la fórmula de contraste WCAG.

| Fondo | Texto | Contraste | Veredicto |
| --- | --- | --- | --- |
| Chicle `#f9a8d4` | Pizarra `#1e293b` | 8,1:1 | Excelente |
| Azul bebé `#93c5fd` | Pizarra `#1e293b` | 8,1:1 | Excelente |
| Rosa caramelo `#fbcfe8` | Blanco | 1,4:1 | No cumple |
| Rosa intenso `#ec4899` | Blanco | 3,5:1 | Solo titulares grandes |
| Azul `#3b82f6` | Blanco | 3,7:1 | Solo titulares grandes |
| Noche `#0b0720` | Cian `#67e8f9` | 13,6:1 | Excelente, el neón como tinta |

El pizarra puntúa igual en los dos extremos pastel, así que una sola tinta sirve para toda la mezcla de algodón de azúcar.

Una invitación de baby shower con letras pizarra oscuro sobre un degradado suave de rosa, lila y azul bebé

Una invitación de 5×7 in sobre algodón de azúcar, con letras pizarra.

Un anuncio de stream horizontal con letras pálidas sobre un fondo oscuro iluminado con rosa y cian neón

Un anuncio de stream sobre rosa y cian neón encima de casi negro.

## Dónde encaja un degradado rosa y azul

- **Baby showers y revelaciones de género:** el uso más tradicional, mejor en los pasteles más pálidos.
- **Tiendas de dulces, pastelerías y heladerías:** los tonos sorbete parecen comestibles.
- **Creadores y streamers:** las versiones neón sobre fondos oscuros van bien con videojuegos y contenido nocturno.
- **Estéticas retro:** el vaporwave, el synthwave y los diseños de [estética Y2K](https://gradiently.design/es/guide/y2k-aesthetic) se apoyan en esta pareja.
- **Orgullo:** el azul claro, el rosa y el blanco son los colores de la bandera del orgullo trans, así que la pareja aparece mucho en el diseño del mes del Orgullo.

## CSS del degradado rosa y azul

```css
.cotton-candy {
  background: linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%);
  color: #1e293b;
}

.neon {
  background-color: #0b0720;
  background-image:
    radial-gradient(circle at 15% 85%, #ec4899 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, #06b6d4 0%, transparent 40%);
  color: #fce7f3;
}
```

Una sección pastel con texto pizarra y una sección neón oscura con dos luces de colores.

El patrón neón, dos luces radiales sobre una base oscura, es fácil de adaptar: mueve las luces, cambia su tamaño, añade una tercera en violeta donde se encuentren. Mantén las luces pequeñas; cuando cubren más de la mitad del encuadre, el fondo oscuro desaparece y con él el resplandor. En Gradiently un Mark va más allá: su luz se mueve despacio y su texto se ajusta a la parte de la mezcla en que se encuentra. Un diseño se exporta como publicación fija o, con Pro, como MP4 o GIF en bucle.

## FAQ

### ¿Cuál es un buen código de degradado rosa y azul?

Para algodón de azúcar, prueba `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`. Para neón, `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`.

### ¿Por qué mi degradado rosa y azul se ve gris en el medio?

Una mezcla directa en sRGB entre un rosa cálido y un azul frío pierde saturación a mitad de camino. Añade una parada lila o violeta en el medio, o escribe `in oklch` después del ángulo.

### ¿Qué color de texto va sobre un degradado rosa y azul pastel?

Un pizarra oscuro como `#1e293b` se lee en ambos extremos con un contraste de unos 8:1. El blanco falla sobre rosa y azul pastel.

### ¿Qué es un degradado de algodón de azúcar?

Una mezcla pastel de rosa y azul bebé, normalmente con un paso lila entre ambos, que toma su nombre del dulce.

### ¿Cómo hago un degradado rosa y azul neón?

Usa rosa y cian saturados sobre un fondo casi negro, como resplandores o franjas y no como relleno completo. El fondo oscuro es lo que hace que los colores parezcan iluminados.