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.