Aurora Pool Gradient: CSS Code & Colors

Q: What's the CSS code for the Aurora Pool gradient?

Use background: radial-gradient(at 13% 43%, #00F5A0, transparent 70%), radial-gradient(at 45% 12%, #00D9F5, transparent 70%), radial-gradient(at 84% 33%, #A29BFE, transparent 70%), radial-gradient(at 76% 77%, #6C5CE7, transparent 70%), radial-gradient(at 32% 84%, #81ECEC, transparent 70%), #00D9F5;. RGBA and HSLA versions are also available on this page.

Aurora Pool Gradient

Mint, cyan, and lavender mesh blobs shimmering from their own bright mint 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

#00F5A0

#00D9F5

#A29BFE

#6C5CE7

#81ECEC

Background
#00D9F5

Aurora Pool CSS Code

background: #00D9F5;
background: radial-gradient(at 13% 43%, #00F5A0, transparent 70%), radial-gradient(at 45% 12%, #00D9F5, transparent 70%), radial-gradient(at 84% 33%, #A29BFE, transparent 70%), radial-gradient(at 76% 77%, #6C5CE7, transparent 70%), radial-gradient(at 32% 84%, #81ECEC, transparent 70%), #00D9F5;

background: rgba(0, 217, 245, 1.0);
background: radial-gradient(at 13% 43%, rgba(0, 245, 160, 1.0), transparent 70%), radial-gradient(at 45% 12%, rgba(0, 217, 245, 1.0), transparent 70%), radial-gradient(at 84% 33%, rgba(162, 155, 254, 1.0), transparent 70%), radial-gradient(at 76% 77%, rgba(108, 92, 231, 1.0), transparent 70%), radial-gradient(at 32% 84%, rgba(129, 236, 236, 1.0), transparent 70%), rgba(0, 217, 245, 1.0);

background: hsla(187, 100%, 48%, 1.0);
background: radial-gradient(at 13% 43%, hsla(159, 100%, 48%, 1.0), transparent 70%), radial-gradient(at 45% 12%, hsla(187, 100%, 48%, 1.0), transparent 70%), radial-gradient(at 84% 33%, hsla(244, 98%, 80%, 1.0), transparent 70%), radial-gradient(at 76% 77%, hsla(247, 74%, 63%, 1.0), transparent 70%), radial-gradient(at 32% 84%, hsla(180, 74%, 72%, 1.0), transparent 70%), hsla(187, 100%, 48%, 1.0);

background: #00D9F5;
background: radial-gradient(at 13% 43%, #00F5A0, transparent 70%), radial-gradient(at 45% 12%, #00D9F5, transparent 70%), radial-gradient(at 84% 33%, #A29BFE, transparent 70%), radial-gradient(at 76% 77%, #6C5CE7, transparent 70%), radial-gradient(at 32% 84%, #81ECEC, transparent 70%), #00D9F5;
background: radial-gradient(at 13% 43% in oklch, oklch(85.54% 0.1959 159.26), transparent 70%), radial-gradient(at 45% 12% in oklch, oklch(81.19% 0.141 211.13), transparent 70%), radial-gradient(at 84% 33% in oklch, oklch(73.59% 0.1411 285.6), transparent 70%), radial-gradient(at 76% 77% in oklch, oklch(56.76% 0.2021 283.08), transparent 70%), radial-gradient(at 32% 84% in oklch, oklch(87.93% 0.0993 195.5), transparent 70%), oklch(81.19% 0.141 211.13);

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

bg-[image:radial-gradient(at_13%_43%,#00F5A0,transparent_70%),radial-gradient(at_45%_12%,#00D9F5,transparent_70%),radial-gradient(at_84%_33%,#A29BFE,transparent_70%),radial-gradient(at_76%_77%,#6C5CE7,transparent_70%),radial-gradient(at_32%_84%,#81ECEC,transparent_70%)] bg-[#00D9F5]

bg-[image:radial-gradient(at_13%_43%,#00F5A0,transparent_70%),radial-gradient(at_45%_12%,#00D9F5,transparent_70%),radial-gradient(at_84%_33%,#A29BFE,transparent_70%),radial-gradient(at_76%_77%,#6C5CE7,transparent_70%),radial-gradient(at_32%_84%,#81ECEC,transparent_70%)] bg-[#00D9F5]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Aurora Pool gradient?