Watermelon Ice Gradient: CSS Code & Colors

Q: What's the CSS code for the Watermelon Ice gradient?

Use background: radial-gradient(at 22% 27%, #FF4D6D, transparent 70%), radial-gradient(at 73% 22%, #52D97F, transparent 70%), radial-gradient(at 78% 73%, #FFFFFF, transparent 70%), radial-gradient(at 27% 78%, #FF85A1, transparent 70%), #52D97F;. RGBA and HSLA versions are also available on this page.

Watermelon Ice Gradient

Pink and green mesh blobs melting into their own bright 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

#FF4D6D

#52D97F

#FFFFFF

#FF85A1

Background
#52D97F

Watermelon Ice CSS Code

background: #52D97F;
background: radial-gradient(at 22% 27%, #FF4D6D, transparent 70%), radial-gradient(at 73% 22%, #52D97F, transparent 70%), radial-gradient(at 78% 73%, #FFFFFF, transparent 70%), radial-gradient(at 27% 78%, #FF85A1, transparent 70%), #52D97F;

background: rgba(82, 217, 127, 1.0);
background: radial-gradient(at 22% 27%, rgba(255, 77, 109, 1.0), transparent 70%), radial-gradient(at 73% 22%, rgba(82, 217, 127, 1.0), transparent 70%), radial-gradient(at 78% 73%, rgba(255, 255, 255, 1.0), transparent 70%), radial-gradient(at 27% 78%, rgba(255, 133, 161, 1.0), transparent 70%), rgba(82, 217, 127, 1.0);

background: hsla(140, 64%, 59%, 1.0);
background: radial-gradient(at 22% 27%, hsla(349, 100%, 65%, 1.0), transparent 70%), radial-gradient(at 73% 22%, hsla(140, 64%, 59%, 1.0), transparent 70%), radial-gradient(at 78% 73%, hsla(0, 0%, 100%, 1.0), transparent 70%), radial-gradient(at 27% 78%, hsla(346, 100%, 76%, 1.0), transparent 70%), hsla(140, 64%, 59%, 1.0);

background: #52D97F;
background: radial-gradient(at 22% 27%, #FF4D6D, transparent 70%), radial-gradient(at 73% 22%, #52D97F, transparent 70%), radial-gradient(at 78% 73%, #FFFFFF, transparent 70%), radial-gradient(at 27% 78%, #FF85A1, transparent 70%), #52D97F;
background: radial-gradient(at 22% 27% in oklch, oklch(67.85% 0.2131 14.72), transparent 70%), radial-gradient(at 73% 22% in oklch, oklch(78.98% 0.1733 151.22), transparent 70%), radial-gradient(at 78% 73% in oklch, oklch(100% 0 none), transparent 70%), radial-gradient(at 27% 78% in oklch, oklch(75.96% 0.15 6.73), transparent 70%), oklch(78.98% 0.1733 151.22);

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

bg-[image:radial-gradient(at_22%_27%,#FF4D6D,transparent_70%),radial-gradient(at_73%_22%,#52D97F,transparent_70%),radial-gradient(at_78%_73%,#FFFFFF,transparent_70%),radial-gradient(at_27%_78%,#FF85A1,transparent_70%)] bg-[#52D97F]

bg-[image:radial-gradient(at_22%_27%,#FF4D6D,transparent_70%),radial-gradient(at_73%_22%,#52D97F,transparent_70%),radial-gradient(at_78%_73%,#FFFFFF,transparent_70%),radial-gradient(at_27%_78%,#FF85A1,transparent_70%)] bg-[#52D97F]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Watermelon Ice gradient?