Mango Tango Gradient: CSS Code & Colors

Q: What's the CSS code for the Mango Tango gradient?

Use background: radial-gradient(at 40% 78%, #FF9A00, transparent 70%), radial-gradient(at 60% 22%, #FF5E7E, transparent 70%), #FF5E7E;. RGBA and HSLA versions are also available on this page.

Mango Tango Gradient

Sunny orange and pink mesh blobs glowing from their own warm 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

#FF9A00

#FF5E7E

Background
#FF5E7E

Mango Tango CSS Code

background: #FF5E7E;
background: radial-gradient(at 40% 78%, #FF9A00, transparent 70%), radial-gradient(at 60% 22%, #FF5E7E, transparent 70%), #FF5E7E;

background: rgba(255, 94, 126, 1.0);
background: radial-gradient(at 40% 78%, rgba(255, 154, 0, 1.0), transparent 70%), radial-gradient(at 60% 22%, rgba(255, 94, 126, 1.0), transparent 70%), rgba(255, 94, 126, 1.0);

background: hsla(348, 100%, 68%, 1.0);
background: radial-gradient(at 40% 78%, hsla(36, 100%, 50%, 1.0), transparent 70%), radial-gradient(at 60% 22%, hsla(348, 100%, 68%, 1.0), transparent 70%), hsla(348, 100%, 68%, 1.0);

background: #FF5E7E;
background: radial-gradient(at 40% 78%, #FF9A00, transparent 70%), radial-gradient(at 60% 22%, #FF5E7E, transparent 70%), #FF5E7E;
background: radial-gradient(at 40% 78% in oklch, oklch(77.36% 0.1735 65.05), transparent 70%), radial-gradient(at 60% 22% in oklch, oklch(70% 0.1959 11.81), transparent 70%), oklch(70% 0.1959 11.81);

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

bg-[image:radial-gradient(at_40%_78%,#FF9A00,transparent_70%),radial-gradient(at_60%_22%,#FF5E7E,transparent_70%)] bg-[#FF5E7E]

bg-[image:radial-gradient(at_40%_78%,#FF9A00,transparent_70%),radial-gradient(at_60%_22%,#FF5E7E,transparent_70%)] bg-[#FF5E7E]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Mango Tango gradient?