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

Um degradê rosa e azul mistura um rosa como #f9a8d4 ou #ec4899 com um azul como #93c5fd ou #3b82f6. Os dois estão um pouco longe demais na roda de cores para se misturarem limpos por defeito, por isso as melhores versões passam por uma paragem de lilás ou violeta no meio. Mantém o par pálido e obténs algodão-doce; leva-o saturado para um fundo escuro e obténs néon. Os códigos abaixo cobrem toda essa gama, com a solução para o meio e as cores de texto que funcionam.

Porque é que um degradê rosa e azul fica cinzento no meio

Os navegadores misturam as cores dos degradês em sRGB por defeito, e entre um rosa quente e um azul frio essa mistura pode perder saturação e parecer ligeiramente cinzenta ou empoeirada. Não é tão dramático como misturar opostos, mas vê-se, sobretudo em misturas pastel. A solução é dares tu nome ao meio: acrescenta uma paragem de lilás ou pervinca para que cada ponto da mistura se mantenha nítido.

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

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

Um rosa pálido a derivar para azul-bebé parece doce, leve e um pouco nostálgico. Mantém um lilás suave ou um creme entre eles e compõe as palavras em ardósia escura em vez de branco.

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

Céu e sorvete: rosa e azul mais vivos

Sobe um pouco a saturação e o par torna-se solarengo e divertido: um céu de verão ao fim do dia, uma banca de sorvetes, um flyer de festa na piscina. Continuam a parecer simpáticos e não gritantes.

Degradês rosa e azul néon

Rosa-choque e ciano elétrico sobre quase preto é a assinatura do vaporwave, do synthwave e de muito design de jogos. O fundo escuro não é opcional: é o que faz as cores brilhar. Mantém o néon em faixas, bordas ou brilhos e deixa a maior parte do quadro escura. Os degradês néon e as cores synthwave tratam do estilo em profundidade.

Cores de texto em degradês rosa e azul

Ambas as pontas de um degradê rosa e azul pastel são claras, por isso o texto em ardósia escura lê-se em toda a superfície, o que faz deste um dos pares mais fáceis para compor texto. As versões saturadas são mais complicadas: o rosa-choque e o azul médio são ambos demasiado claros para texto branco pequeno. Os valores abaixo usam a fórmula de contraste das WCAG.

Onde um degradê rosa e azul encaixa

• Chás de bebé e revelações de sexo: o uso mais tradicional, melhor nos pastéis mais pálidos.
• Lojas de doces, pastelarias e gelados: os tons de sorvete parecem comestíveis.
• Criadores e streamers: as versões néon sobre fundos escuros servem jogos e conteúdo noturno.
• Estéticas retro: o vaporwave, o synthwave e os designs de estética Y2K apoiam-se todos neste par.
• Orgulho: azul-claro, rosa e branco são as cores da bandeira do orgulho trans, por isso o par aparece muito no design 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 néon, duas luzes radiais sobre uma base escura, é fácil de adaptar: move as luzes, muda o tamanho, acrescenta uma terceira em violeta onde se encontram. Mantém as luzes pequenas; quando cobrem mais de metade do quadro, o fundo escuro desaparece e o brilho também. Na Gradiently um Mark vai mais longe: a sua luz move-se devagar e o texto ajusta-se à parte da mistura em que está. Um design exporta-se como publicação estática ou, com o Pro, como MP4 ou GIF em loop.