Mermaid Scales Gradient: CSS Code & Colors

Q: What's the CSS code for the Mermaid Scales gradient?

Use background: linear-gradient(90deg, #094074 0%, #3C6997 30%, #5ADBFF 65%, #FFDD4A 100%);. RGBA and HSLA versions are also available on this page.

Mermaid Scales Gradient

Deep navy shimmering into aqua and gold.

Customize this gradient →

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

Color Stops

#094074

#3C6997

#5ADBFF

#FFDD4A

Mermaid Scales CSS Code

background: #094074;
background: linear-gradient(90deg, #094074 0%, #3C6997 30%, #5ADBFF 65%, #FFDD4A 100%);

background: rgba(9, 64, 116, 1.0);
background: linear-gradient(90deg, rgba(9, 64, 116, 1.0) 0%, rgba(60, 105, 151, 1.0) 30%, rgba(90, 219, 255, 1.0) 65%, rgba(255, 221, 74, 1.0) 100%);

background: hsla(209, 86%, 25%, 1.0);
background: linear-gradient(90deg, hsla(209, 86%, 25%, 1.0) 0%, hsla(210, 43%, 41%, 1.0) 30%, hsla(193, 100%, 68%, 1.0) 65%, hsla(49, 100%, 65%, 1.0) 100%);

background: #094074;
background: linear-gradient(90deg, #094074 0%, #3C6997 30%, #5ADBFF 65%, #FFDD4A 100%);
background: linear-gradient(90deg in oklch, oklch(36.89% 0.1039 252.38) 0%, oklch(50.95% 0.0889 250.44) 30%, oklch(83.37% 0.1225 219.58) 65%, oklch(90.13% 0.162 95.72) 100%);

The same colors blended in OKLCH, so this one looks more vivid than the gradient above. Older browsers show the standard gradient. How OKLCH gradients work →

bg-linear-[90deg,#094074_0%,#3C6997_30%,#5ADBFF_65%,#FFDD4A_100%]

bg-[linear-gradient(90deg,#094074_0%,#3C6997_30%,#5ADBFF_65%,#FFDD4A_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Mermaid Scales gradient?