Ocean CSS Gradient Generator
An ocean CSS gradient that flows from deep sea blue through teal into aqua green, like water catching the light. Cool and fresh, it works for wellness, travel and eco-themed sites. Copy it or tweak the stops below. 100% in your browser - copy the CSS or a Tailwind v4 export.
About the ocean gradient
Ocean gradients live in the blue-to-green range, which the eye reads as water, calm and clean. This preset moves from a deep ocean blue through teal into a bright aqua so it feels like light hitting a wave. Because the hues sit close together on the color wheel, the blend stays smooth and natural. Adjust the angle for a horizon feel, then copy the CSS or Tailwind v4 @theme token.
The CSS for this gradient:
background: linear-gradient(in oklch 120deg, #0369a1 0%, #0891b2 50%, #2dd4bf 100%);
Frequently Asked Questions
Ocean gradients stay in the blue-to-green family: a deep sea blue like #0369a1, a teal such as #0891b2 and an aqua like #2dd4bf. Keeping the hues adjacent on the color wheel gives that natural water look.
Not quite. A blue gradient stays within blue, while an ocean gradient shifts from blue toward green (teal and aqua), which is what gives it the sense of water rather than sky.
Other gradient colors
Jump to a ready-made gradient and copy the CSS in one click.
From the blog
Improving Core Web Vitals: Replacing Background Images with CSS Gradients
Decorative background images cause late-discovery network bottlenecks. Learn how replacing them with native CSS gradients reduces LCP delays to zero.
Read →tailwindThe Complete Guide to Tailwind CSS v4 Gradients
Tailwind CSS v4 introduces semantic upgrades to gradient classes and native OKLCH support. Learn how to use bg-linear and CSS-first theme configurations.
Read →cssThe Physics of Muddy Gradients: Bypassing the sRGB 'Dead Zone' with OKLCH
Learn why linear interpolation across sRGB color coordinates produces muddy gray gradients, and how perceptually uniform spaces like OKLCH fix it.
Read →