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

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

Rosa e azul ficam um pouco distantes demais para se misturar no piloto automático. Cuide bem do meio e você tem céus de algodão-doce ou letreiros de neon; ignore-o e terá uma mancha lilás sem graça.

## The short version

- Um degradê rosa e azul mistura rosas como #f9a8d4 ou #ec4899 com azuis como #93c5fd ou #3b82f6, em geral passando por lilás ou violeta no meio.
- Como rosa e azul não são vizinhos diretos, uma mistura reta entre eles pode ficar acinzentada no meio, e uma parada lilás ou violeta resolve.
- Misturas pálidas de rosa e azul lembram algodão-doce e pedem tinta escura, enquanto rosa saturado e ciano sobre quase preto lembram neon.
- Nem o rosa vivo nem o azul médio sustentam bem texto branco pequeno, então reserve o branco para títulos grandes ou para bases escuras.
- Rosa e azul combinam com chás de bebê, lojas de doces, criadores, games e estéticas retrô como vaporwave e Y2K.

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.

- Duas paradas, mistura padrão: `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 uma parada de ponte. O segundo continua saturado pelo centro. [Gradientes turvos](https://gradiently.design/pt-br/guide/muddy-gradients) explica a ciência da cor.

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.

- Algodão-doce: `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`
- Mantinha 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 degrau lilás, pervinca ou creme, então nada no meio fica empoeirado.

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

> **Imprimindo rosa e azul pastel** Misturas muito pálidas podem quase sumir em papel não revestido, e azuis vivos de tela costumam sair mais opacos na impressão. Aprofunde um pouco cada parada em convites e flyers e peça uma prova. [Degradês na impressão](https://gradiently.design/pt-br/guide/print-gradients) trata dos detalhes.

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

- Céu de fim de tarde: `linear-gradient(180deg, #7dd3fc 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Sorbet: `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 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 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](https://gradiently.design/pt-br/guide/neon-gradients) e [cores synthwave](https://gradiently.design/pt-br/guide/synthwave-colors) tratam do estilo em profundidade.

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

Rosa e azul neon. O rosa pálido e o ciano são ótimas cores de texto nas partes escuras.

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

| Fundo | Texto | Contraste | Veredito |
| --- | --- | --- | --- |
| Chiclete `#f9a8d4` | Ardósia `#1e293b` | 8,1:1 | Excelente |
| Azul-bebê `#93c5fd` | Ardósia `#1e293b` | 8,1:1 | Excelente |
| Rosa-bala `#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, neon como tinta |

A ardósia tem a mesma nota nas duas pontas pastel, então uma só tinta funciona em toda a mistura 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 live com letras claras sobre um fundo escuro iluminado com rosa e ciano neon

Um anúncio de live em rosa e ciano neon sobre quase preto.

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

```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 seção pastel com texto em ardósia e uma seção neon escura com duas luzes coloridas.

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.

## FAQ

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

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

### Por que meu degradê rosa e azul parece cinza no meio?

Uma mistura reta em sRGB entre um rosa quente e um azul frio perde saturação na metade. Adicione uma parada lilás ou violeta no meio ou escreva `in oklch` depois do ângulo.

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

Uma ardósia escura como `#1e293b` é lida nas duas pontas com cerca de 8:1 de contraste. O branco falha no rosa e no azul pastel.

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

Uma mistura pastel de rosa e azul-bebê, em geral com um degrau lilás entre eles, que leva o nome do doce.

### Como faço um degradê rosa e azul neon?

Use rosa saturado e ciano sobre uma base quase preta, como brilhos ou faixas em vez de um preenchimento total. A base escura é o que faz as cores parecerem acesas.