# Degradê oceano: códigos das águas rasas às profundezas

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

O mar já é um degradê: pálido sobre a areia, brilhante onde o sol chega, quase preto onde não chega. Copie essa ordem e a mistura de oceano parece real. Aqui estão os códigos, profundidade por profundidade.

## The short version

- Um degradê oceano mistura azuis e azuis-esverdeados na ordem em que a água real os mostra: pálido e turquesa nas águas rasas, azul límpido em mar aberto e azul-marinho quase preto no fundo.
- A água absorve primeiro a luz vermelha, e é por isso que o mar fica mais azul e mais escuro com a profundidade.
- Degradês de oceano verticais, claros no topo e escuros embaixo, lembram profundidade; uma parada seca entre dois azuis lembra um horizonte.
- Texto branco funciona na metade azul profunda de um degradê oceano; as águas rasas pálidas pedem texto azul-marinho escuro.
- Degradês de oceano combinam com viagens, natação, vela, frutos do mar, sustentabilidade e produtos de tecnologia calma.

Um **degradê oceano** mistura azuis e azuis-esverdeados na mesma ordem do mar: azul-água pálido sobre a areia, turquesa nas águas rasas, azul límpido em mar aberto e um marinho quase preto no fundo. Aplique de cima para baixo, do claro ao escuro, e as pessoas leem profundidade sem que ninguém diga. Os códigos abaixo seguem esse mergulho e depois acrescentam misturas de horizonte, um mar em CSS de página inteira e as cores de texto que mantêm as palavras legíveis sobre a água.

## Por que o oceano é azul e por que isso importa para o seu degradê

A água absorve primeiro a ponta vermelha da luz solar, depois o amarelo e o verde, então quanto mais fundo você vai, mais só resta o azul, e depois até ele some. A água rasa sobre areia clara reflete muita luz e parece turquesa; a água profunda parece azul-marinho escuro. Um degradê oceano que mantém essa ordem parece natural; um que põe azul escuro acima do turquesa parece de cabeça para baixo, mesmo que ninguém saiba dizer por quê.

- Espuma: #e0f7f4
- Águas rasas: #7ee0d6
- Lagoa: #22b8cf
- Mar aberto: #0284c7
- Ondulação: #075985
- Zona crepuscular: #0c3b66
- Profundezas: #082f49
- Abismo: #020c1b

O mar de cima para baixo. A maioria dos degradês de oceano usa três ou quatro paradas vizinhas desta coluna.

## Degradês de oceano raso

A ponta brilhante: a água que você vê de uma praia ou de um barco com tempo bom. Ensolarados, limpos e convidativos, combinam com marcas de férias, moda praia, empresas de piscina e cardápios de verão. O lado mais tropical aparece em [degradês turquesa](https://gradiently.design/pt-br/guide/turquoise-gradient).

- Espuma para águas rasas: `linear-gradient(180deg, #e0f7f4 0%, #7ee0d6 100%)`
- Água cristalina: `linear-gradient(180deg, #a5f3fc 0%, #22b8cf 100%)`
- Sol na água: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #7ee0d6 40%, #0891b2 100%)`
- Queda do recife: `linear-gradient(160deg, #7ee0d6 0%, #22b8cf 50%, #0284c7 100%)`

Misturas de água rasa. Cada uma começa com uma parada pálida ou brilhante, como a água clara parece sobre a areia.

## Degradês de mar aberto

Mais longe da costa, o mar perde o verde e vira um azul límpido e confiante. Essas misturas parecem confiáveis, calmas e competentes, e por isso combinam com clubes de vela, seguros de viagem, ciência marinha e marcas de tecnologia que querem azul sem a frieza do marinho corporativo. [Degradês azuis](https://gradiently.design/pt-br/guide/blue-gradient) tem a família azul mais ampla.

- Mar aberto: `linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #075985 100%)`
- Atlântico: `linear-gradient(135deg, #22b8cf 0%, #1d4ed8 100%)`
- Alto-mar: `linear-gradient(180deg, #0ea5e9 0%, #0c3b66 100%)`
- Ondulação: `linear-gradient(160deg, #0284c7 0%, #075985 45%, #0c3b66 100%)`

Azuis de águas abertas. Menos verde, mais profundidade e ainda brilhantes o bastante no topo para lembrar a luz do dia.

## Degradês de oceano profundo

No fim do mergulho, o mar fica quase preto, com só um traço de azul. São dramáticos e silenciosos ao mesmo tempo: escolas de mergulho, documentários, relógios de luxo, restaurantes de frutos do mar à noite. Um leve brilho vindo de cima, como a luz da superfície, evita que pareçam vazios. Misturas escuras formam faixas com facilidade, então leia sobre [banding em degradês](https://gradiently.design/pt-br/guide/gradient-banding) antes de exportar.

- Descida: `linear-gradient(180deg, #075985 0%, #082f49 50%, #020c1b 100%)`
- Luz da superfície: `radial-gradient(ellipse at 50% 0%, #0ea5e9 0%, #0c3b66 30%, #020c1b 80%)`
- Bioluminescência: `radial-gradient(circle at 70% 80%, #22b8cf 0%, #082f49 30%, #020c1b 75%)`

Misturas de mar profundo. Uma fonte suave de luz basta; todo o resto é profundidade.

## Degradês de horizonte e de orla

Designs de oceano costumam incluir o céu ou a praia. O truque do horizonte é uma parada seca: duas paradas de cor na mesma posição, para o céu acabar e o mar começar numa linha limpa. Uma orla funciona ao contrário, fundindo o mar com a areia por uma parada de espuma pálida, para que o quente e o frio nunca se encontrem como cinza. [Paradas de degradê](https://gradiently.design/pt-br/guide/gradient-stops) explica como funcionam as posições.

- Horizonte ao amanhecer: `linear-gradient(180deg, #fde2cf 0%, #bae6fd 45%, #0284c7 45%, #082f49 100%)`
- Horizonte ao meio-dia: `linear-gradient(180deg, #bfdbfe 0%, #e0f2fe 52%, #0ea5e9 52%, #0c3b66 100%)`
- Orla: `linear-gradient(180deg, #0284c7 0%, #7ee0d6 50%, #e0f7f4 70%, #f5deb3 100%)`

Paradas secas fazem um horizonte; uma parada de espuma pálida faz uma orla suave.

## Escolhendo a direção para cada formato

Como um degradê oceano significa profundidade, ele funciona melhor na vertical, e os formatos altos mostram o mergulho inteiro. Em formatos largos, uma mistura de horizonte ou um brilho radial costuma funcionar melhor que espremer o mar inteiro numa altura curta. Um post vertical fica no meio: uma mistura vertical suave de mar aberto a profundo funciona, desde que o título caia numa faixa só, e não sobre a mudança.

- Story 1080×1920: 1080 × 1920
- Pin 1000×1500: 1000 × 1500
- Post 1080×1350: 1080 × 1350
- Hero de site 1920×1080: 1920 × 1080
- Banner do LinkedIn 1584×396: 1584 × 396

Em stories e pins, use a altura toda para o mergulho. No hero e no banner, tente um horizonte ou uma luz vinda de um lado.

É aqui que uma única imagem recortada deixa você na mão: a luz acaba no lugar errado em metade dos tamanhos. Um Mark do Gradiently renderiza de novo em cada formato, e o Designer pode produzir o story, o post e o banner a partir de um só briefing, para o mar ficar certo em cada um.

## Um degradê oceano em CSS para a página inteira

Uma página longa pode virar um mergulho: brilhante no topo, profunda no rodapé. Prenda o degradê à altura inteira do documento, e não da janela, dê a ele uma cor sólida de reserva e acrescente um suave brilho de superfície no topo. [Degradês lineares em CSS](https://gradiently.design/pt-br/guide/css-linear-gradient) cobre a sintaxe.

```css
html {
  background-color: #082f49; /* fallback, and the colour seen on overscroll */
}

body {
  min-height: 100vh;
  margin: 0;
  color: #082f49;
  background-image:
    radial-gradient(ellipse 90% 30% at 50% 0%, rgb(224 247 244 / 0.8) 0%, transparent 70%),
    linear-gradient(180deg, #7ee0d6 0%, #22b8cf 18%, #0284c7 40%, #075985 65%, #082f49 85%, #020c1b 100%);
}

/* switch to light text once the page reaches deep water */
.deep { color: #e0f7f4; }
```

Uma página que fica mais profunda conforme você rola. Use texto escuro nas seções superiores brilhantes e texto claro nas inferiores.

## Texto sobre um degradê oceano

Uma mistura de oceano vai de muito clara a muito escura, então nenhuma cor de texto única funciona em toda ela. Marinho profundo `#082f49` sobre azul-céu pálido `#7dd3fc` mede cerca de 8,3 para 1. Branco sobre ondulação `#075985` mede cerca de 7,6 para 1, e sobre mar aberto `#0284c7` cai para cerca de 4,1 para 1, bom para títulos grandes, mas insuficiente para texto corrido. Coloque as palavras onde a cor as favoreça e veja [texto sobre degradês](https://gradiently.design/pt-br/guide/text-on-gradient) para mais técnicas.

Um story de clube de vela com título claro sobre um degradê oceano que escurece do azul vivo ao marinho profundo

Um story que vai da água brilhante no topo ao azul profundo embaixo, com as palavras na faixa mais calma.

## FAQ

### Quais cores formam um degradê oceano?

Azul-água pálido, turquesa, azul límpido, azul profundo e marinho quase preto, nessa ordem de cima para baixo. Códigos como `#7ee0d6`, `#0284c7` e `#082f49` cobrem a faixa.

### Um degradê oceano deve ir do claro ao escuro ou do escuro ao claro?

Claro no topo e escuro embaixo, o que combina com a forma como a luz some com a profundidade na água real.

### Como faço uma linha de horizonte em um degradê CSS?

Dê a duas paradas de cor a mesma posição, como `#bae6fd 45%, #0284c7 45%`. A cor então muda numa linha nítida em vez de uma mistura.

### Que cor de texto funciona sobre um degradê oceano?

Marinho escuro na parte superior clara e branco na parte inferior profunda. Confira o ponto exatamente atrás de cada linha de texto.

### Qual a diferença entre um degradê oceano e um degradê azul?

Um degradê oceano segue a ordem da água real e costuma incluir turquesa e marinho quase preto. Um degradê azul pode ser qualquer mistura de azuis.