Ocean gradient: codes from shallows to the deep

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.

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.

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 has the wider blue family.

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 before you export.

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 explains how stop positions work.

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.

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 covers the syntax.

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

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 for more techniques.