Prism Burst Gradient
Eight vivid mesh blobs radiating across a clean white canvas.
Customize this gradient → Opens it in the generator: change the type or direction, adjust the colors, then copy the CSS or download.
Color Stops
#FF3B3B
#3B82FF
#FFD23B
#3BFFA8
#FF7A3B
#3BFFEA
#C13BFF
#FF3B9E
Background
#FFFFFF
#FFFFFF
Prism Burst CSS Code
background: #FFFFFF; background: radial-gradient(at 86% 50%, #FF3B3B, transparent 70%), radial-gradient(at 75% 75%, #3B82FF, transparent 70%), radial-gradient(at 50% 86%, #FFD23B, transparent 70%), radial-gradient(at 25% 75%, #3BFFA8, transparent 70%), radial-gradient(at 14% 50%, #FF7A3B, transparent 70%), radial-gradient(at 25% 25%, #3BFFEA, transparent 70%), radial-gradient(at 50% 14%, #C13BFF, transparent 70%), radial-gradient(at 75% 25%, #FF3B9E, transparent 70%), #FFFFFF;
background: rgba(255, 255, 255, 1.0); background: radial-gradient(at 86% 50%, rgba(255, 59, 59, 1.0), transparent 70%), radial-gradient(at 75% 75%, rgba(59, 130, 255, 1.0), transparent 70%), radial-gradient(at 50% 86%, rgba(255, 210, 59, 1.0), transparent 70%), radial-gradient(at 25% 75%, rgba(59, 255, 168, 1.0), transparent 70%), radial-gradient(at 14% 50%, rgba(255, 122, 59, 1.0), transparent 70%), radial-gradient(at 25% 25%, rgba(59, 255, 234, 1.0), transparent 70%), radial-gradient(at 50% 14%, rgba(193, 59, 255, 1.0), transparent 70%), radial-gradient(at 75% 25%, rgba(255, 59, 158, 1.0), transparent 70%), rgba(255, 255, 255, 1.0);
background: hsla(0, 0%, 100%, 1.0); background: radial-gradient(at 86% 50%, hsla(0, 100%, 62%, 1.0), transparent 70%), radial-gradient(at 75% 75%, hsla(218, 100%, 62%, 1.0), transparent 70%), radial-gradient(at 50% 86%, hsla(46, 100%, 62%, 1.0), transparent 70%), radial-gradient(at 25% 75%, hsla(153, 100%, 62%, 1.0), transparent 70%), radial-gradient(at 14% 50%, hsla(19, 100%, 62%, 1.0), transparent 70%), radial-gradient(at 25% 25%, hsla(174, 100%, 62%, 1.0), transparent 70%), radial-gradient(at 50% 14%, hsla(281, 100%, 62%, 1.0), transparent 70%), radial-gradient(at 75% 25%, hsla(330, 100%, 62%, 1.0), transparent 70%), hsla(0, 0%, 100%, 1.0);
background: #FFFFFF; background: radial-gradient(at 86% 50%, #FF3B3B, transparent 70%), radial-gradient(at 75% 75%, #3B82FF, transparent 70%), radial-gradient(at 50% 86%, #FFD23B, transparent 70%), radial-gradient(at 25% 75%, #3BFFA8, transparent 70%), radial-gradient(at 14% 50%, #FF7A3B, transparent 70%), radial-gradient(at 25% 25%, #3BFFEA, transparent 70%), radial-gradient(at 50% 14%, #C13BFF, transparent 70%), radial-gradient(at 75% 25%, #FF3B9E, transparent 70%), #FFFFFF; background: radial-gradient(at 86% 50% in oklch, oklch(65.53% 0.2309 26.4), transparent 70%), radial-gradient(at 75% 75% in oklch, oklch(62.93% 0.1996 260.77), transparent 70%), radial-gradient(at 50% 86% in oklch, oklch(87.87% 0.1638 91.22), transparent 70%), radial-gradient(at 25% 75% in oklch, oklch(88.69% 0.193 158.22), transparent 70%), radial-gradient(at 14% 50% in oklch, oklch(72.56% 0.1788 43.64), transparent 70%), radial-gradient(at 25% 25% in oklch, oklch(90.34% 0.1501 183.85), transparent 70%), radial-gradient(at 50% 14% in oklch, oklch(63.65% 0.2747 312.08), transparent 70%), radial-gradient(at 75% 25% in oklch, oklch(67.71% 0.2414 355.29), transparent 70%), oklch(100% 0 none);
The same gradient with its colors in OKLCH. Older browsers show the standard version. How OKLCH gradients work →
bg-[image:radial-gradient(at_86%_50%,#FF3B3B,transparent_70%),radial-gradient(at_75%_75%,#3B82FF,transparent_70%),radial-gradient(at_50%_86%,#FFD23B,transparent_70%),radial-gradient(at_25%_75%,#3BFFA8,transparent_70%),radial-gradient(at_14%_50%,#FF7A3B,transparent_70%),radial-gradient(at_25%_25%,#3BFFEA,transparent_70%),radial-gradient(at_50%_14%,#C13BFF,transparent_70%),radial-gradient(at_75%_25%,#FF3B9E,transparent_70%)] bg-[#FFFFFF]
bg-[image:radial-gradient(at_86%_50%,#FF3B3B,transparent_70%),radial-gradient(at_75%_75%,#3B82FF,transparent_70%),radial-gradient(at_50%_86%,#FFD23B,transparent_70%),radial-gradient(at_25%_75%,#3BFFA8,transparent_70%),radial-gradient(at_14%_50%,#FF7A3B,transparent_70%),radial-gradient(at_25%_25%,#3BFFEA,transparent_70%),radial-gradient(at_50%_14%,#C13BFF,transparent_70%),radial-gradient(at_75%_25%,#FF3B9E,transparent_70%)] bg-[#FFFFFF]
Similar Gradients
More Gradient Presets
FAQ
What is the Prism Burst gradient?
Eight vivid mesh blobs radiating across a clean white canvas.
What's the CSS code for the Prism Burst gradient?
Use background: radial-gradient(at 86% 50%, #FF3B3B, transparent 70%), radial-gradient(at 75% 75%, #3B82FF, transparent 70%), radial-gradient(at 50% 86%, #FFD23B, transparent 70%), radial-gradient(at 25% 75%, #3BFFA8, transparent 70%), radial-gradient(at 14% 50%, #FF7A3B, transparent 70%), radial-gradient(at 25% 25%, #3BFFEA, transparent 70%), radial-gradient(at 50% 14%, #C13BFF, transparent 70%), radial-gradient(at 75% 25%, #FF3B9E, transparent 70%), #FFFFFF;. RGBA and HSLA versions are also available on this page.