CSS Gradient
Ocean Gradient
Dive into the depths with this ocean gradient. It flows from dark navy through rich teal to a vibrant aqua, mimicking the light filtering through ocean water. Ideal for marine brands, environmental sites, and designs that need depth and mystery.
CSS
background: linear-gradient(180deg, #0f0c29 0%, #302b63 40%, #24c6dc 100%);Color Stops
#0F0C29
#302B63
#24C6DC
Frequently Asked Questions
›What colors are in the ocean gradient?
The gradient uses deep midnight blue (#0F0C29), rich indigo (#302B63), and vivid cyan (#24C6DC). The dark-to-light transition mimics ocean depth.
›Is this gradient good for dark mode?
Yes. The deep blue base makes it excellent for dark mode interfaces. Use light or white text for readability against the darker sections.
›How do I make this gradient more subtle?
Reduce the contrast by bringing the color stops closer in value. For example, change the last stop from #24C6DC to #1A8A9A for a more muted, sophisticated look.
ocean gradientocean gradient cssblue teal gradientsea gradientdeep blue gradient