Pacific Depth
linearA deep ocean gradient from sky blue to navy.
Pacific Depth as a Full-Bleed Hero
Pacific Depth runs vertically from sky blue at the top down to a deep navy at the bottom, and it is the classic choice for ocean, travel, and technology brands that want a calm but clearly branded hero. The light top and dark bottom give vertical compositions a natural weight, which makes it easy to place a headline high and let the content ground itself near the darker end.
White text is comfortable on the navy third of the ramp, and off-white text still works across most of the middle. The sky-blue top is the riskiest zone for light text, so keep headlines slightly below the top edge or add a subtle dark overlay. The two stops are far enough apart in value that the gradient never feels muddy, and it compresses well into small panels like buttons and loading bars.
The vertical run from sky blue to navy puts the light stop at the top, so place the headline high in the hero and let white text hold on the darker middle. For a smaller use, the same two stops make a serviceable button fill, though a solid navy is easier to trust at small sizes. The SVG export keeps the exact stops, so the gradient can move from this page into production art without a redesign. If the finished hero feels too flat, layer a faint dot pattern over the navy third instead of adding another color.
position 0%
position 100%
background: linear-gradient(180deg, #0EA5E9 0%, #1E3A8A 100%);:root {
--gradient-pacific-depth: linear-gradient(180deg, #0EA5E9 0%, #1E3A8A 100%);
}
.gradient-pacific-depth {
background-image: var(--gradient-pacific-depth);
}<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
<defs>
<linearGradient id="g" x1="50.00%" y1="0.00%" x2="50.00%" y2="100.00%">
<stop offset="0.000" stop-color="#0EA5E9" />
<stop offset="1.000" stop-color="#1E3A8A" />
</linearGradient>
</defs>
<rect width="1200" height="600" fill="url(#g)" />
</svg>