Golden Mesh Gradient
Warm gold and amber mesh blobs glowing from their own radiant gold 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
#FFD700
#FFA500
#FFEC8B
#FFB700
#FF8C00
#FFF3C4
Background
#FFD700
#FFD700
Golden Mesh CSS Code
background: #FFD700; background: radial-gradient(at 44% 18%, #FFD700, transparent 70%), radial-gradient(at 75% 29%, #FFA500, transparent 70%), radial-gradient(at 80% 61%, #FFEC8B, transparent 70%), radial-gradient(at 56% 82%, #FFB700, transparent 70%), radial-gradient(at 25% 71%, #FF8C00, transparent 70%), radial-gradient(at 20% 39%, #FFF3C4, transparent 70%), #FFD700;
background: rgba(255, 215, 0, 1.0); background: radial-gradient(at 44% 18%, rgba(255, 215, 0, 1.0), transparent 70%), radial-gradient(at 75% 29%, rgba(255, 165, 0, 1.0), transparent 70%), radial-gradient(at 80% 61%, rgba(255, 236, 139, 1.0), transparent 70%), radial-gradient(at 56% 82%, rgba(255, 183, 0, 1.0), transparent 70%), radial-gradient(at 25% 71%, rgba(255, 140, 0, 1.0), transparent 70%), radial-gradient(at 20% 39%, rgba(255, 243, 196, 1.0), transparent 70%), rgba(255, 215, 0, 1.0);
background: hsla(51, 100%, 50%, 1.0); background: radial-gradient(at 44% 18%, hsla(51, 100%, 50%, 1.0), transparent 70%), radial-gradient(at 75% 29%, hsla(39, 100%, 50%, 1.0), transparent 70%), radial-gradient(at 80% 61%, hsla(50, 100%, 77%, 1.0), transparent 70%), radial-gradient(at 56% 82%, hsla(43, 100%, 50%, 1.0), transparent 70%), radial-gradient(at 25% 71%, hsla(33, 100%, 50%, 1.0), transparent 70%), radial-gradient(at 20% 39%, hsla(48, 100%, 88%, 1.0), transparent 70%), hsla(51, 100%, 50%, 1.0);
background: #FFD700; background: radial-gradient(at 44% 18%, #FFD700, transparent 70%), radial-gradient(at 75% 29%, #FFA500, transparent 70%), radial-gradient(at 80% 61%, #FFEC8B, transparent 70%), radial-gradient(at 56% 82%, #FFB700, transparent 70%), radial-gradient(at 25% 71%, #FF8C00, transparent 70%), radial-gradient(at 20% 39%, #FFF3C4, transparent 70%), #FFD700; background: radial-gradient(at 44% 18% in oklch, oklch(88.68% 0.1822 95.33), transparent 70%), radial-gradient(at 75% 29% in oklch, oklch(79.27% 0.171 70.67), transparent 70%), radial-gradient(at 80% 61% in oklch, oklch(93.81% 0.1196 98.5), transparent 70%), radial-gradient(at 56% 82% in oklch, oklch(82.53% 0.1709 80.01), transparent 70%), radial-gradient(at 25% 71% in oklch, oklch(75.05% 0.1791 58.28), transparent 70%), radial-gradient(at 20% 39% in oklch, oklch(96.21% 0.0619 95.4), transparent 70%), oklch(88.68% 0.1822 95.33);
The same gradient with its colors in OKLCH. Older browsers show the standard version. How OKLCH gradients work →
bg-[image:radial-gradient(at_44%_18%,#FFD700,transparent_70%),radial-gradient(at_75%_29%,#FFA500,transparent_70%),radial-gradient(at_80%_61%,#FFEC8B,transparent_70%),radial-gradient(at_56%_82%,#FFB700,transparent_70%),radial-gradient(at_25%_71%,#FF8C00,transparent_70%),radial-gradient(at_20%_39%,#FFF3C4,transparent_70%)] bg-[#FFD700]
bg-[image:radial-gradient(at_44%_18%,#FFD700,transparent_70%),radial-gradient(at_75%_29%,#FFA500,transparent_70%),radial-gradient(at_80%_61%,#FFEC8B,transparent_70%),radial-gradient(at_56%_82%,#FFB700,transparent_70%),radial-gradient(at_25%_71%,#FF8C00,transparent_70%),radial-gradient(at_20%_39%,#FFF3C4,transparent_70%)] bg-[#FFD700]
Try it as
Similar Gradients
More Gradient Presets
FAQ
What is the Golden Mesh gradient?
Warm gold and amber mesh blobs glowing from their own radiant gold base.
What's the CSS code for the Golden Mesh gradient?
Use background: radial-gradient(at 44% 18%, #FFD700, transparent 70%), radial-gradient(at 75% 29%, #FFA500, transparent 70%), radial-gradient(at 80% 61%, #FFEC8B, transparent 70%), radial-gradient(at 56% 82%, #FFB700, transparent 70%), radial-gradient(at 25% 71%, #FF8C00, transparent 70%), radial-gradient(at 20% 39%, #FFF3C4, transparent 70%), #FFD700;. RGBA and HSLA versions are also available on this page.