Candy Drop Gradient: CSS Code & Colors

Q: What's the CSS code for the Candy Drop gradient?

Use background: radial-gradient(at 73% 22%, #FF1493, transparent 70%), radial-gradient(at 62% 84%, #00CED1, transparent 70%), radial-gradient(at 15% 44%, #FFD700, transparent 70%), #FF1493;. RGBA and HSLA versions are also available on this page.

Candy Drop Gradient

Hot pink, turquoise, and gold mesh blobs glowing from a matching pink 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

#FF1493

#00CED1

#FFD700

Background
#FF1493

Candy Drop CSS Code

background: #FF1493;
background: radial-gradient(at 73% 22%, #FF1493, transparent 70%), radial-gradient(at 62% 84%, #00CED1, transparent 70%), radial-gradient(at 15% 44%, #FFD700, transparent 70%), #FF1493;

background: rgba(255, 20, 147, 1.0);
background: radial-gradient(at 73% 22%, rgba(255, 20, 147, 1.0), transparent 70%), radial-gradient(at 62% 84%, rgba(0, 206, 209, 1.0), transparent 70%), radial-gradient(at 15% 44%, rgba(255, 215, 0, 1.0), transparent 70%), rgba(255, 20, 147, 1.0);

background: hsla(328, 100%, 54%, 1.0);
background: radial-gradient(at 73% 22%, hsla(328, 100%, 54%, 1.0), transparent 70%), radial-gradient(at 62% 84%, hsla(181, 100%, 41%, 1.0), transparent 70%), radial-gradient(at 15% 44%, hsla(51, 100%, 50%, 1.0), transparent 70%), hsla(328, 100%, 54%, 1.0);

background: #FF1493;
background: radial-gradient(at 73% 22%, #FF1493, transparent 70%), radial-gradient(at 62% 84%, #00CED1, transparent 70%), radial-gradient(at 15% 44%, #FFD700, transparent 70%), #FF1493;
background: radial-gradient(at 73% 22% in oklch, oklch(65.49% 0.2613 356.94), transparent 70%), radial-gradient(at 62% 84% in oklch, oklch(77.19% 0.1314 196.64), transparent 70%), radial-gradient(at 15% 44% in oklch, oklch(88.68% 0.1822 95.33), transparent 70%), oklch(65.49% 0.2613 356.94);

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

bg-[image:radial-gradient(at_73%_22%,#FF1493,transparent_70%),radial-gradient(at_62%_84%,#00CED1,transparent_70%),radial-gradient(at_15%_44%,#FFD700,transparent_70%)] bg-[#FF1493]

bg-[image:radial-gradient(at_73%_22%,#FF1493,transparent_70%),radial-gradient(at_62%_84%,#00CED1,transparent_70%),radial-gradient(at_15%_44%,#FFD700,transparent_70%)] bg-[#FF1493]

Similar Gradients

More Gradient Presets

FAQ

What is the Candy Drop gradient?