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

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.

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.

Para más de esta paleta suave, degradados pastel y paletas de colores pastel van más allá.

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.

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 y colores synthwave tratan el estilo a fondo.

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.

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 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

.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;
}

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.