Citrus Splash Gradient: CSS Code & Colors

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

Use background: radial-gradient(at 71% 25%, #FFEE58, transparent 70%), radial-gradient(at 75% 71%, #FF7043, transparent 70%), radial-gradient(at 29% 75%, #9CCC65, transparent 70%), radial-gradient(at 25% 29%, #FFCA28, transparent 70%), #FFEE58;. RGBA and HSLA versions are also available on this page.

Citrus Splash Gradient

Yellow, orange, and lime mesh blobs bursting from their own sunny 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

#FFEE58

#FF7043

#9CCC65

#FFCA28

Background
#FFEE58

Citrus Splash CSS Code

background: #FFEE58;
background: radial-gradient(at 71% 25%, #FFEE58, transparent 70%), radial-gradient(at 75% 71%, #FF7043, transparent 70%), radial-gradient(at 29% 75%, #9CCC65, transparent 70%), radial-gradient(at 25% 29%, #FFCA28, transparent 70%), #FFEE58;

background: rgba(255, 238, 88, 1.0);
background: radial-gradient(at 71% 25%, rgba(255, 238, 88, 1.0), transparent 70%), radial-gradient(at 75% 71%, rgba(255, 112, 67, 1.0), transparent 70%), radial-gradient(at 29% 75%, rgba(156, 204, 101, 1.0), transparent 70%), radial-gradient(at 25% 29%, rgba(255, 202, 40, 1.0), transparent 70%), rgba(255, 238, 88, 1.0);

background: hsla(54, 100%, 67%, 1.0);
background: radial-gradient(at 71% 25%, hsla(54, 100%, 67%, 1.0), transparent 70%), radial-gradient(at 75% 71%, hsla(14, 100%, 63%, 1.0), transparent 70%), radial-gradient(at 29% 75%, hsla(88, 50%, 60%, 1.0), transparent 70%), radial-gradient(at 25% 29%, hsla(45, 100%, 58%, 1.0), transparent 70%), hsla(54, 100%, 67%, 1.0);

background: #FFEE58;
background: radial-gradient(at 71% 25%, #FFEE58, transparent 70%), radial-gradient(at 75% 71%, #FF7043, transparent 70%), radial-gradient(at 29% 75%, #9CCC65, transparent 70%), radial-gradient(at 25% 29%, #FFCA28, transparent 70%), #FFEE58;
background: radial-gradient(at 71% 25% in oklch, oklch(93.64% 0.1657 102.81), transparent 70%), radial-gradient(at 75% 71% in oklch, oklch(71.24% 0.1848 37.77), transparent 70%), radial-gradient(at 29% 75% in oklch, oklch(78.87% 0.1425 129.77), transparent 70%), radial-gradient(at 25% 29% in oklch, oklch(86.22% 0.1681 88.31), transparent 70%), oklch(93.64% 0.1657 102.81);

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

bg-[image:radial-gradient(at_71%_25%,#FFEE58,transparent_70%),radial-gradient(at_75%_71%,#FF7043,transparent_70%),radial-gradient(at_29%_75%,#9CCC65,transparent_70%),radial-gradient(at_25%_29%,#FFCA28,transparent_70%)] bg-[#FFEE58]

bg-[image:radial-gradient(at_71%_25%,#FFEE58,transparent_70%),radial-gradient(at_75%_71%,#FF7043,transparent_70%),radial-gradient(at_29%_75%,#9CCC65,transparent_70%),radial-gradient(at_25%_29%,#FFCA28,transparent_70%)] bg-[#FFEE58]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Citrus Splash gradient?