Watermelon Splash Gradient: CSS Code & Colors

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

Use background: linear-gradient(45deg, #1D976C 0%, #93F9B9 45%, #FF5858 100%);. RGBA and HSLA versions are also available on this page.

Watermelon Splash Gradient

Rind green through to juicy red.

Customize this gradient →

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

Color Stops

#1D976C

#93F9B9

#FF5858

Watermelon Splash CSS Code

background: #1D976C;
background: linear-gradient(45deg, #1D976C 0%, #93F9B9 45%, #FF5858 100%);

background: rgba(29, 151, 108, 1.0);
background: linear-gradient(45deg, rgba(29, 151, 108, 1.0) 0%, rgba(147, 249, 185, 1.0) 45%, rgba(255, 88, 88, 1.0) 100%);

background: hsla(159, 68%, 35%, 1.0);
background: linear-gradient(45deg, hsla(159, 68%, 35%, 1.0) 0%, hsla(142, 89%, 78%, 1.0) 45%, hsla(0, 100%, 67%, 1.0) 100%);

background: #1D976C;
background: linear-gradient(45deg, #1D976C 0%, #93F9B9 45%, #FF5858 100%);
background: linear-gradient(45deg in oklch, oklch(60.2% 0.1218 163.37) 0%, oklch(90.3% 0.1312 155.2) 45%, oklch(68.59% 0.2031 24.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-linear-45/srgb from-[#1D976C] from-0% via-[#93F9B9] via-45% to-[#FF5858] to-100%

bg-[linear-gradient(45deg,#1D976C_0%,#93F9B9_45%,#FF5858_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Watermelon Splash gradient?