Emerald Spiral Gradient: CSS Code & Colors

Q: What's the CSS code for the Emerald Spiral gradient?

Use background: conic-gradient(from 45deg, #003D2E 0%, #00A878 33%, #B7E4C7 67%, #003D2E 100%);. RGBA and HSLA versions are also available on this page.

Emerald Spiral Gradient

Conic sweep of deep emerald into pale mint.

Customize this gradient →

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

Color Stops

#003D2E

#00A878

#B7E4C7

#003D2E

Emerald Spiral CSS Code

background: #003D2E;
background: conic-gradient(from 45deg, #003D2E 0%, #00A878 33%, #B7E4C7 67%, #003D2E 100%);

background: rgba(0, 61, 46, 1.0);
background: conic-gradient(from 45deg, rgba(0, 61, 46, 1.0) 0%, rgba(0, 168, 120, 1.0) 33%, rgba(183, 228, 199, 1.0) 67%, rgba(0, 61, 46, 1.0) 100%);

background: hsla(165, 100%, 12%, 1.0);
background: conic-gradient(from 45deg, hsla(165, 100%, 12%, 1.0) 0%, hsla(163, 100%, 33%, 1.0) 33%, hsla(141, 45%, 81%, 1.0) 67%, hsla(165, 100%, 12%, 1.0) 100%);

background: #003D2E;
background: conic-gradient(from 45deg, #003D2E 0%, #00A878 33%, #B7E4C7 67%, #003D2E 100%);
background: conic-gradient(from 45deg in oklch, oklch(32.03% 0.0633 170.21) 0%, oklch(64.78% 0.1376 164.26) 33%, oklch(87.92% 0.0614 156.65) 67%, oklch(32.03% 0.0633 170.21) 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-[conic-gradient(from_45deg,#003D2E_0%,#00A878_33%,#B7E4C7_67%,#003D2E_100%)]

bg-[conic-gradient(from_45deg,#003D2E_0%,#00A878_33%,#B7E4C7_67%,#003D2E_100%)]

Similar Gradients

More Gradient Presets

FAQ

What is the Emerald Spiral gradient?