Códigos de degradê rosa e azul: de algodão-doce a neon

Um degradê rosa e azul mistura um rosa como #f9a8d4 ou #ec4899 em um azul como #93c5fd ou #3b82f6. Os dois ficam um pouco distantes demais no círculo cromático para se misturar de forma limpa por padrão, então as melhores versões passam por uma parada lilás ou violeta no meio. Mantenha o par pálido e você tem algodão-doce; leve-o ao saturado sobre uma base escura e você tem neon. Os códigos abaixo cobrem toda essa faixa, com a solução para o meio e as cores de texto que funcionam.

Por que um degradê rosa e azul fica cinza no meio

Os navegadores misturam as cores de um degradê em sRGB por padrão, e entre um rosa quente e um azul frio essa mistura pode perder saturação e parecer levemente acinzentada ou empoeirada. Não é tão dramático quanto misturar opostos, mas dá para ver, sobretudo em misturas pastel. A solução é nomear o meio você mesmo: adicione uma parada lilás ou pervinca para que cada ponto da mistura continue nítido.

Em CSS, você também pode escrever linear-gradient(90deg in oklch, #f472b6, #60a5fa), que mantém a luminosidade e a saturação uniformes ao longo da mistura. A parada de ponte funciona em todo lugar, porém, e dá controle sobre qual lilás exatamente aparece.

Degradês algodão-doce: rosa e azul pastel

Um rosa pálido que se dissolve em azul-bebê parece doce, leve e um pouco nostálgico. Mantenha um lilás suave ou um creme entre eles e componha as palavras em ardósia escura em vez de branco.

Para mais da paleta suave, degradês pastel e paletas de cores pastel vão mais longe.

Céu e sorbet: rosa e azul mais vivos

Aumente um pouco a saturação e o par fica solar e divertido: um céu de verão no fim do dia, uma barraca de sorvete, um flyer de festa na piscina. Eles ainda parecem amigáveis, e não berrantes.

Degradês rosa e azul neon

Rosa-choque e ciano elétrico sobre quase preto são a assinatura do vaporwave, do synthwave e de muito design de games. A base escura não é opcional: é ela que faz as cores brilharem. Mantenha o neon em faixas, bordas ou brilhos e deixe a maior parte do quadro escura. Degradês neon e cores synthwave tratam do estilo em profundidade.

Cores de texto em degradês rosa e azul

As duas pontas de um degradê rosa e azul pastel são claras, então o texto em ardósia escura é lido em toda a superfície, o que faz deste um dos pares mais fáceis de compor com tipografia. As versões saturadas são mais complicadas: o rosa-choque e o azul médio são claros demais para texto branco pequeno. Os valores abaixo usam a fórmula de contraste da WCAG.

Onde um degradê rosa e azul combina

• Chás de bebê e revelações de sexo: o uso mais tradicional, melhor nos pastéis mais pálidos.
• Lojas de doces, padarias e sorveterias: os tons de sorbet parecem comestíveis.
• Criadores e streamers: as versões neon sobre bases escuras combinam com games e conteúdo noturno.
• Estéticas retrô: o vaporwave, o synthwave e os designs da estética Y2K se apoiam no par.
• Orgulho: azul-claro, rosa e branco são as cores da bandeira do orgulho trans, então o par aparece muito em designs do mês do Orgulho.

CSS de degradê rosa e 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;
}

O padrão neon, duas luzes radiais sobre uma base escura, é fácil de adaptar: mova as luzes, mude o tamanho, adicione uma terceira em violeta onde se encontram. Mantenha as luzes pequenas; quando cobrem mais da metade do quadro, a base escura some, e o brilho também. No Gradiently, um Mark vai além: sua luz se move devagar e a tipografia se ajusta à parte da mistura em que está. Um design é exportado como post estático ou, com o Pro, como MP4 ou GIF em loop.