# Ocean gradient: codes from shallows to the deep

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

The sea is a gradient already: pale over sand, bright where the sun reaches, almost black where it doesn't. Copy that order and an ocean blend looks real. Here are the codes, depth by depth.

## The short version

- An ocean gradient blends blues and blue greens in the order real water shows them: pale and turquoise in the shallows, clear blue in open water and near black navy in the deep.
- Water absorbs red light first, which is why the sea turns bluer and darker with depth.
- Vertical ocean gradients, light at the top and dark at the bottom, read as depth; a hard stop between two blues reads as a horizon.
- White text works on the deep blue half of an ocean gradient; the pale shallows need dark navy type.
- Ocean gradients suit travel, swimming, sailing, seafood, sustainability and calm technology products.

An **ocean gradient** blends blues and blue greens in the same order the sea does: pale aqua over sand, turquoise in the shallows, clear blue in open water and an almost black navy in the deep. Run it top to bottom, light to dark, and people read it as depth without being told. The codes below follow that dive, then add horizon blends, a full page CSS sea and the type colours that keep words readable on water.

## Why the ocean is blue, and why it matters for your gradient

Water absorbs the red end of sunlight first, then yellow and green, so the deeper you go the more only blue remains, and then even that fades. Shallow water over pale sand reflects lots of light and looks turquoise; deep water looks dark navy. An ocean gradient that keeps this order feels natural; one that puts dark blue above turquoise looks upside down, even if nobody can say why.

- Foam: #e0f7f4
- Shallows: #7ee0d6
- Lagoon: #22b8cf
- Open sea: #0284c7
- Swell: #075985
- Twilight zone: #0c3b66
- Deep: #082f49
- Abyss: #020c1b

The sea from top to bottom. Most ocean gradients use three or four neighbouring stops from this column.

## Shallow ocean gradients

The bright end: the water you see from a beach or a boat in clear weather. Sunny, clean and inviting, these suit holiday brands, swimwear, pool companies and summer menus. The more tropical side is covered in [turquoise gradients](https://gradiently.design/guide/turquoise-gradient).

- Foam to shallows: `linear-gradient(180deg, #e0f7f4 0%, #7ee0d6 100%)`
- Clear water: `linear-gradient(180deg, #a5f3fc 0%, #22b8cf 100%)`
- Sun on the water: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #7ee0d6 40%, #0891b2 100%)`
- Reef drop: `linear-gradient(160deg, #7ee0d6 0%, #22b8cf 50%, #0284c7 100%)`

Shallow water blends. Each starts with a pale or bright stop, the way light water looks over sand.

## Open sea gradients

Further out, the sea loses its green and turns a clear, confident blue. These blends feel reliable, calm and capable, which is why they suit sailing clubs, travel insurers, marine science and technology brands that want blue without the coldness of corporate navy. [Blue gradients](https://gradiently.design/guide/blue-gradient) has the wider blue family.

- Open sea: `linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #075985 100%)`
- Atlantic: `linear-gradient(135deg, #22b8cf 0%, #1d4ed8 100%)`
- Offshore: `linear-gradient(180deg, #0ea5e9 0%, #0c3b66 100%)`
- Swell: `linear-gradient(160deg, #0284c7 0%, #075985 45%, #0c3b66 100%)`

Open water blues. Less green, more depth, and still bright enough at the top to feel like daylight.

## Deep ocean gradients

At the bottom of the dive, the sea becomes nearly black with only a trace of blue. These are dramatic and quiet at once: diving schools, documentaries, luxury watches, seafood restaurants after dark. A faint glow from above, like light from the surface, keeps them from feeling empty. Dark blends band easily, so read [gradient banding](https://gradiently.design/guide/gradient-banding) before you export.

- Descent: `linear-gradient(180deg, #075985 0%, #082f49 50%, #020c1b 100%)`
- Light from the surface: `radial-gradient(ellipse at 50% 0%, #0ea5e9 0%, #0c3b66 30%, #020c1b 80%)`
- Bioluminescence: `radial-gradient(circle at 70% 80%, #22b8cf 0%, #082f49 30%, #020c1b 75%)`

Deep sea blends. One soft source of light is enough; everything else is depth.

## Horizon and shoreline gradients

Ocean designs often include the sky or the beach. The trick for a horizon is a hard stop: two colour stops at the same position, so the sky ends and the sea begins on a clean line. A shoreline works the other way, fading sea into sand through a pale foam stop so the warm and cool colours never meet as grey. [Gradient stops](https://gradiently.design/guide/gradient-stops) explains how stop positions work.

- Horizon at dawn: `linear-gradient(180deg, #fde2cf 0%, #bae6fd 45%, #0284c7 45%, #082f49 100%)`
- Midday horizon: `linear-gradient(180deg, #bfdbfe 0%, #e0f2fe 52%, #0ea5e9 52%, #0c3b66 100%)`
- Shoreline: `linear-gradient(180deg, #0284c7 0%, #7ee0d6 50%, #e0f7f4 70%, #f5deb3 100%)`

Hard stops make a horizon; a pale foam stop makes a soft shoreline.

## Choosing direction for each format

Because an ocean gradient means depth, it works best running vertically, and tall formats show the full dive. In wide formats, a horizon blend or a radial glow usually works better than squeezing the whole sea into a short height. A portrait post sits in between: a gentle vertical blend from open sea to deep works, as long as the headline lands in one band rather than across the change.

- Story 1080×1920: 1080 × 1920
- Pin 1000×1500: 1000 × 1500
- Post 1080×1350: 1080 × 1350
- Website hero 1920×1080: 1920 × 1080
- LinkedIn banner 1584×396: 1584 × 396

On stories and pins, use the full height for the dive. On the hero and the banner, try a horizon or a light from one side instead.

This is where a single cropped image lets you down: the light ends up in the wrong place on half your sizes. A Gradiently Mark renders fresh in every format instead, and the Designer can produce the story, the post and the banner from one brief, so the sea sits correctly in each.

## An ocean gradient in CSS for a full page

A long page can become a dive: bright at the top, deep at the footer. Attach the gradient to the whole document height rather than the window, give it a solid fallback, and add a soft surface glow at the top. [CSS linear gradients](https://gradiently.design/guide/css-linear-gradient) covers the syntax.

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

A page that gets deeper as you scroll. Use dark text in the bright upper sections and light text in the lower ones.

## Text on an ocean gradient

An ocean blend changes from very light to very dark, so no single text colour works across all of it. Deep navy `#082f49` on pale sky blue `#7dd3fc` measures about 8.3 to 1. White on swell `#075985` measures about 7.6 to 1, and on open sea `#0284c7` it drops to about 4.1 to 1, fine for large headlines but short of body text. Place words where the colour suits them, and see [text on gradients](https://gradiently.design/guide/text-on-gradient) for more techniques.

A sailing club story with clear headline text on an ocean gradient that darkens from bright blue to deep navy

A story that runs from bright water at the top to deep blue at the bottom, with the words in the calmest band.

## FAQ

### What colours make an ocean gradient?

Pale aqua, turquoise, clear blue, deep blue and near black navy, in that order from top to bottom. Codes such as `#7ee0d6`, `#0284c7` and `#082f49` cover the range.

### Should an ocean gradient go light to dark or dark to light?

Light at the top and dark at the bottom, which matches how light fades with depth in real water.

### How do I make a horizon line in a CSS gradient?

Give two colour stops the same position, such as `#bae6fd 45%, #0284c7 45%`. The colour then changes on a sharp line instead of a blend.

### What text colour works on an ocean gradient?

Dark navy on the light upper part and white on the deep lower part. Check the point directly behind each line of text.

### What is the difference between an ocean gradient and a blue gradient?

An ocean gradient follows the order of real water and usually includes turquoise and near black navy. A blue gradient can be any blend of blues.