# Gradiente de oceano: códigos do baixio às profundezas [Canonical HTML page](https://gradiently.design/pt-pt/guide/ocean-gradient) O mar já é um gradiente: pálido sobre a areia, brilhante onde o sol chega, quase negro onde não chega. Copia essa ordem e uma mistura de oceano parece real. Aqui ficam os códigos, profundidade a profundidade. ## The short version - Um gradiente de oceano mistura azuis e azuis-esverdeados pela ordem em que a água real os mostra: pálido e turquesa no baixio, azul limpo em mar aberto e azul-marinho quase negro nas profundezas. - A água absorve primeiro a luz vermelha, e é por isso que o mar fica mais azul e mais escuro com a profundidade. - Os gradientes de oceano verticais, claros em cima e escuros em baixo, leem-se como profundidade; uma paragem dura entre dois azuis lê-se como um horizonte. - O texto branco funciona na metade azul profunda de um gradiente de oceano; o baixio pálido precisa de texto azul-marinho escuro. - Os gradientes de oceano servem viagens, natação, vela, marisco, sustentabilidade e produtos tecnológicos serenos. Um **gradiente de oceano** mistura azuis e azuis-esverdeados pela mesma ordem do mar: água-marinha pálida sobre a areia, turquesa no baixio, azul limpo em mar aberto e um azul-marinho quase negro nas profundezas. Corre-o de cima para baixo, de claro a escuro, e as pessoas leem-no como profundidade sem que lho digam. Os códigos abaixo seguem esse mergulho e depois juntam 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. ## Porque é que o oceano é azul, e porque isso importa para o teu gradiente A água absorve primeiro o extremo vermelho da luz solar, depois o amarelo e o verde, por isso quanto mais fundo vais, mais só resta azul, e depois até esse se esbate. A água pouco profunda sobre areia clara reflete muita luz e parece turquesa; a água profunda parece azul-marinho escuro. Um gradiente de oceano que mantém esta ordem parece natural; um que põe azul escuro acima do turquesa parece de pernas para o ar, mesmo que ninguém saiba dizer porquê. - Espuma: #e0f7f4 - Baixio: #7ee0d6 - Lagoa: #22b8cf - Mar aberto: #0284c7 - Ondulação: #075985 - Zona crepuscular: #0c3b66 - Profundo: #082f49 - Abismo: #020c1b O mar de cima para baixo. A maioria dos gradientes de oceano usa três ou quatro paragens vizinhas desta coluna. ## Gradientes de oceano de águas rasas O extremo luminoso: a água que se vê da praia ou de um barco com tempo limpo. Solares, limpos e convidativos, servem marcas de férias, fatos de banho, empresas de piscinas e ementas de verão. O lado mais tropical está tratado em [gradientes turquesa](https://gradiently.design/pt-pt/guide/turquoise-gradient). - Da espuma ao baixio: `linear-gradient(180deg, #e0f7f4 0%, #7ee0d6 100%)` - Água clara: `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 paragem pálida ou brilhante, como a água clara parece sobre a areia. ## Gradientes de mar aberto Mais ao largo, o mar perde o verde e torna-se de um azul limpo e confiante. Estas misturas parecem fiáveis, serenas e competentes, e é por isso que servem clubes de vela, seguradoras de viagem, ciência marinha e marcas de tecnologia que querem azul sem a frieza do azul-marinho empresarial. [Gradientes azuis](https://gradiently.design/pt-pt/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%)` - Ao largo: `linear-gradient(180deg, #0ea5e9 0%, #0c3b66 100%)` - Ondulação: `linear-gradient(160deg, #0284c7 0%, #075985 45%, #0c3b66 100%)` Azuis de mar aberto. Menos verde, mais profundidade, e ainda brilhantes o suficiente no topo para parecerem luz do dia. ## Gradientes de oceano profundo No fundo do mergulho, o mar fica quase negro com apenas um vestígio de azul. São dramáticos e calmos ao mesmo tempo: escolas de mergulho, documentários, relógios de luxo, restaurantes de marisco depois de escurecer. Um brilho ténue vindo de cima, como a luz da superfície, evita que pareçam vazios. As misturas escuras criam bandas com facilidade, por isso lê [bandas num gradiente](https://gradiently.design/pt-pt/guide/gradient-banding) antes de exportares. - 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 só fonte de luz suave chega; tudo o resto é profundidade. ## Gradientes de horizonte e de linha de costa Os designs de oceano incluem muitas vezes o céu ou a praia. O truque para um horizonte é uma paragem dura: duas paragens de cor na mesma posição, para que o céu acabe e o mar comece numa linha limpa. Uma linha de costa funciona ao contrário, esbatendo o mar em areia através de uma paragem de espuma pálida para que as cores quentes e frias nunca se encontrem como cinzento. [Paragens de cor num gradiente](https://gradiently.design/pt-pt/guide/gradient-stops) explica como funcionam as posições das paragens. - 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%)` - Linha de costa: `linear-gradient(180deg, #0284c7 0%, #7ee0d6 50%, #e0f7f4 70%, #f5deb3 100%)` As paragens duras fazem um horizonte; uma paragem de espuma pálida faz uma linha de costa suave. ## Escolher a direção para cada formato Como um gradiente de oceano significa profundidade, funciona melhor na vertical, e os formatos altos mostram o mergulho completo. Em formatos largos, uma mistura de horizonte ou um brilho radial costuma funcionar melhor do que espremer o mar inteiro numa altura curta. Uma publicação vertical fica a meio caminho: uma suave mistura vertical de mar aberto a profundo funciona, desde que o título caia numa faixa e não atravesse a mudança. - Story 1080×1920: 1080 × 1920 - Pin 1000×1500: 1000 × 1500 - Publicação 1080×1350: 1080 × 1350 - Destaque de site 1920×1080: 1920 × 1080 - Banner LinkedIn 1584×396: 1584 × 396 Em stories e pins, usa a altura toda para o mergulho. No destaque e no banner, experimenta antes um horizonte ou uma luz de um dos lados. É aqui que uma só imagem cortada te deixa mal: a luz acaba no sítio errado em metade dos teus tamanhos. Um Mark do Gradiently é gerado de novo em cada formato, e o Designer pode produzir o story, a publicação e o banner a partir de um só briefing, para o mar ficar bem colocado em cada um. ## Um gradiente de oceano em CSS para uma página inteira Uma página longa pode tornar-se um mergulho: brilhante no topo, profunda no rodapé. Prende o gradiente à altura total do documento e não à janela, dá-lhe um fundo sólido de reserva e junta um suave brilho de superfície no topo. [Gradientes lineares em CSS](https://gradiently.design/pt-pt/guide/css-linear-gradient) trata da 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 à medida que deslizas. Usa texto escuro nas secções superiores claras e texto claro nas inferiores. ## Texto sobre um gradiente de oceano Uma mistura de oceano passa de muito clara a muito escura, por isso nenhuma cor de texto única funciona em toda ela. Azul-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 aquém do texto corrido. Coloca as palavras onde a cor lhes convém, e vê [texto sobre gradientes](https://gradiently.design/pt-pt/guide/text-on-gradient) para mais técnicas. Um story de um clube de vela com texto de título nítido sobre um gradiente de oceano que escurece de azul brilhante a azul-marinho profundo Um story que vai da água brilhante no topo ao azul profundo em baixo, com as palavras na faixa mais calma. ## FAQ ### Que cores formam um gradiente de oceano? Água-marinha pálida, turquesa, azul limpo, azul profundo e azul-marinho quase negro, por esta ordem de cima para baixo. Códigos como `#7ee0d6`, `#0284c7` e `#082f49` cobrem a gama. ### Um gradiente de oceano deve ir de claro a escuro ou de escuro a claro? Claro em cima e escuro em baixo, o que corresponde ao modo como a luz se esvai com a profundidade na água real. ### Como faço uma linha de horizonte num gradiente CSS? Dá a duas paragens de cor a mesma posição, como `#bae6fd 45%, #0284c7 45%`. A cor muda então numa linha nítida em vez de numa mistura. ### Que cor de texto funciona num gradiente de oceano? Azul-marinho escuro na parte superior clara e branco na parte inferior profunda. Verifica o ponto mesmo atrás de cada linha de texto. ### Qual é a diferença entre um gradiente de oceano e um gradiente azul? Um gradiente de oceano segue a ordem da água real e costuma incluir turquesa e azul-marinho quase negro. Um gradiente azul pode ser qualquer mistura de azuis.