Ocean Gradient
CSS
background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);Open in Gradient Maker →
Other formats
CSS custom property
--gradient-ocean: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
Tailwind arbitrary value
bg-[linear-gradient(135deg,_#06b6d4_0%,_#3b82f6_50%,_#8b5cf6_100%)]
Same colours, other shapes
The same stops passed through the other gradient functions — copy whichever suits the surface.
Reversed direction
background: linear-gradient(315deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);Radial
background: radial-gradient(circle, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);Conic
background: conic-gradient(from 135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);Text on this gradient
Aa
2.43:1
Aa
4.46:1
Measured against every stop, near-black text holds a worst-case contrast of 4.46:1 on this gradient. Passes WCAG AA for large text only (3:1) — use it at 24px or above, or 18.7px bold.
Color stops
About this gradient
Ocean is a ready-to-use CSS gradient with 3 color stops. Copy the CSS below, open it in the Gradient Maker to tweak the angle and stops, or click any stop color for its full breakdown.
More gradients