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

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

O rosa e o azul estão um pouco longe demais para se misturarem em piloto automático. Trata bem o meio e obténs céus de algodão-doce ou letreiros néon; ignora-o e obténs uma mancha baça de lilás.

## The short version

- Um degradê rosa e azul mistura rosas como #f9a8d4 ou #ec4899 com azuis como #93c5fd ou #3b82f6, normalmente passando por lilás ou violeta no meio.
- Como o rosa e o azul não são vizinhos diretos, uma mistura direta entre eles pode ficar acinzentada no meio, e uma paragem de lilás ou violeta resolve-o.
- As misturas pálidas de rosa e azul leem-se como algodão-doce e pedem tinta escura, enquanto o rosa saturado e o ciano sobre quase preto se leem como néon.
- Nem o rosa vivo nem o azul médio levam bem texto branco pequeno, por isso reserva o branco para títulos grandes ou para fundos escuros.
- O rosa e o azul servem chás de bebé, lojas de doces, criadores, jogos e estéticas retro como vaporwave e Y2K.

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.

- Duas paragens, mistura por defeito: `linear-gradient(90deg, #f472b6 0%, #60a5fa 100%)`
- Com uma ponte violeta: `linear-gradient(90deg, #f472b6 0%, #c084fc 50%, #60a5fa 100%)`

O mesmo rosa e azul, com e sem paragem de ponte. O segundo mantém-se saturado no centro. O artigo [degradês turvos](https://gradiently.design/pt-pt/guide/muddy-gradients) explica a ciência da cor.

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.

- Algodão-doce: `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`
- Manta de bebé: `linear-gradient(180deg, #fce7f3 0%, #e0f2fe 100%)`
- Nuvem de açúcar: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #ddd6fe 45%, #a5f3fc 100%)`
- Manhã de pêssego: `linear-gradient(160deg, #fff7ed 0%, #fbcfe8 40%, #c7d2fe 100%)`

Misturas pastel de rosa e azul. Cada uma tem um passo de lilás, pervinca ou creme, para que nada no meio fique empoeirado.

Para mais da paleta suave, os [degradês pastel](https://gradiently.design/pt-pt/guide/pastel-gradients) e as [paletas de cores pastel](https://gradiently.design/pt-pt/guide/pastel-color-palettes) vão mais longe.

> **Imprimir rosa e azul pastel** As misturas muito pálidas podem quase desaparecer em papel não revestido, e os azuis vivos de ecrã imprimem muitas vezes mais baços. Aprofunda ligeiramente cada paragem para convites e flyers e pede uma prova. O artigo [degradês em impressão](https://gradiently.design/pt-pt/guide/print-gradients) trata dos pormenores.

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

- Céu ao entardecer: `linear-gradient(180deg, #7dd3fc 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Sorvete: `linear-gradient(120deg, #f472b6 0%, #a78bfa 50%, #38bdf8 100%)`
- Festa na piscina: `radial-gradient(circle at 80% 80%, #fda4af 0%, #a5b4fc 45%, #7dd3fc 100%)`

Degradês de rosa e azul de saturação média. Ideais para promoções de verão e conteúdo de criadores.

## 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](https://gradiently.design/pt-pt/guide/neon-gradients) e as [cores synthwave](https://gradiently.design/pt-pt/guide/synthwave-colors) tratam do estilo em profundidade.

- Viagem noturna: `linear-gradient(180deg, #0b0720 0%, #3b0764 55%, #ec4899 100%)`
- Letreiro néon: `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`
- Candeeiro rosa, névoa ciano: `radial-gradient(ellipse at 20% 80%, #f0abfc 0%, #7e22ce 30%, #155e75 60%, #0b0720 85%)`
- Alvorada de arcade: `conic-gradient(from 180deg at 50% 100%, #06b6d4, #8b5cf6, #ec4899, #06b6d4)`

Rosa e azul néon. O rosa pálido e o ciano são ambos excelentes cores de texto nas zonas escuras.

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

| Fundo | Texto | Contraste | Veredito |
| --- | --- | --- | --- |
| Pastilha elástica `#f9a8d4` | Ardósia `#1e293b` | 8,1:1 | Excelente |
| Azul-bebé `#93c5fd` | Ardósia `#1e293b` | 8,1:1 | Excelente |
| Rosa doce `#fbcfe8` | Branco | 1,4:1 | Falha |
| Rosa-choque `#ec4899` | Branco | 3,5:1 | Só títulos grandes |
| Azul `#3b82f6` | Branco | 3,7:1 | Só títulos grandes |
| Noite `#0b0720` | Ciano `#67e8f9` | 13,6:1 | Excelente, o néon como tinta |

A ardósia dá o mesmo nas duas pontas pastel, por isso uma só tinta serve em toda a mistura de algodão-doce.

Convite de chá de bebé com letras em ardósia escura sobre um degradê suave de rosa, lilás e azul-bebé

Um convite de 5×7 pol em algodão-doce, com letras em ardósia.

Anúncio horizontal de stream com letras pálidas sobre um fundo escuro iluminado com rosa e ciano néon

Um anúncio de stream em rosa e ciano néon sobre quase preto.

## 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](https://gradiently.design/pt-pt/guide/y2k-aesthetic) 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

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

Uma secção pastel com texto em ardósia e uma secção néon escura com duas luzes coloridas.

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.

## FAQ

### Qual é um bom código de degradê rosa e azul?

Para algodão-doce, experimenta `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`. Para néon, `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`.

### Porque é que o meu degradê rosa e azul parece cinzento no meio?

Uma mistura direta em sRGB entre um rosa quente e um azul frio perde saturação a meio. Acrescenta uma paragem de lilás ou violeta no meio, ou escreve `in oklch` depois do ângulo.

### Que cor de texto vai sobre um degradê pastel rosa e azul?

Uma ardósia escura como `#1e293b` lê-se nas duas pontas com cerca de 8:1 de contraste. O branco falha sobre rosa e azul pastel.

### O que é um degradê algodão-doce?

Uma mistura pastel de rosa e azul-bebé, normalmente com um passo de lilás entre eles, com o nome do doce.

### Como faço um degradê rosa e azul néon?

Usa rosa e ciano saturados sobre um fundo quase preto, como brilhos ou faixas e não como preenchimento total. O fundo escuro é o que faz as cores parecerem iluminadas.