Ocean Vortex Gradient
Conic sweep of deep navy into pale aqua.
Open in the gradient generator →
Color Stops
#003049
#0077B6
#90E0EF
#003049
Ocean Vortex CSS Code
HEX Copy
background: #003049; background: conic-gradient(from 0deg, #003049 0%, #0077B6 33%, #90E0EF 67%, #003049 100%);
RGBA Copy
background: rgba(0, 48, 73, 1.0); background: conic-gradient(from 0deg, rgba(0, 48, 73, 1.0) 0%, rgba(0, 119, 182, 1.0) 33%, rgba(144, 224, 239, 1.0) 67%, rgba(0, 48, 73, 1.0) 100%);
HSLA Copy
background: hsla(201, 100%, 14%, 1.0); background: conic-gradient(from 0deg, hsla(201, 100%, 14%, 1.0) 0%, hsla(201, 100%, 36%, 1.0) 33%, hsla(189, 75%, 75%, 1.0) 67%, hsla(201, 100%, 14%, 1.0) 100%);
More Gradient Presets
FAQ
What is the Ocean Vortex gradient?Conic sweep of deep navy into pale aqua.
What's the CSS code for the Ocean Vortex gradient?
Use
background: conic-gradient(from 0deg, #003049 0%, #0077B6 33%, #90E0EF 67%, #003049 100%);. RGBA and HSLA versions are also available on this page.