Deep Sea Gradient: CSS Code & Colors

Q: What's the CSS code for the Deep Sea gradient?

Use background: radial-gradient(at 87% 60%, #00A8CC, transparent 70%), radial-gradient(at 13% 40%, #005577, transparent 70%), #00A8CC;. RGBA and HSLA versions are also available on this page.

Deep Sea Gradient

Teal and cyan mesh blobs glowing from their own deep sea base.

Customize this gradient →

Opens it in the generator: change the type or direction, adjust the colors, then copy the CSS or download.

Color Stops

#00A8CC

#005577

Background
#00A8CC

Deep Sea CSS Code

background: #00A8CC;
background: radial-gradient(at 87% 60%, #00A8CC, transparent 70%), radial-gradient(at 13% 40%, #005577, transparent 70%), #00A8CC;

background: rgba(0, 168, 204, 1.0);
background: radial-gradient(at 87% 60%, rgba(0, 168, 204, 1.0), transparent 70%), radial-gradient(at 13% 40%, rgba(0, 85, 119, 1.0), transparent 70%), rgba(0, 168, 204, 1.0);

background: hsla(191, 100%, 40%, 1.0);
background: radial-gradient(at 87% 60%, hsla(191, 100%, 40%, 1.0), transparent 70%), radial-gradient(at 13% 40%, hsla(197, 100%, 23%, 1.0), transparent 70%), hsla(191, 100%, 40%, 1.0);

background: #00A8CC;
background: radial-gradient(at 87% 60%, #00A8CC, transparent 70%), radial-gradient(at 13% 40%, #005577, transparent 70%), #00A8CC;
background: radial-gradient(at 87% 60% in oklch, oklch(67.7% 0.1236 220.37), transparent 70%), radial-gradient(at 13% 40% in oklch, oklch(42.37% 0.0889 234.18), transparent 70%), oklch(67.7% 0.1236 220.37);

The same gradient with its colors in OKLCH. Older browsers show the standard version. How OKLCH gradients work →

bg-[image:radial-gradient(at_87%_60%,#00A8CC,transparent_70%),radial-gradient(at_13%_40%,#005577,transparent_70%)] bg-[#00A8CC]

bg-[image:radial-gradient(at_87%_60%,#00A8CC,transparent_70%),radial-gradient(at_13%_40%,#005577,transparent_70%)] bg-[#00A8CC]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Deep Sea gradient?