Honeycomb Gradient: CSS Code & Colors

Q: What's the CSS code for the Honeycomb gradient?

Use background: radial-gradient(at 76% 72%, #FFC107, transparent 70%), radial-gradient(at 28% 76%, #FF8F00, transparent 70%), radial-gradient(at 24% 28%, #FFE082, transparent 70%), radial-gradient(at 72% 24%, #E65100, transparent 70%), #E65100;. RGBA and HSLA versions are also available on this page.

Honeycomb Gradient

Warm amber and gold mesh blobs pooling into their own honeyed 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

#FFC107

#FF8F00

#FFE082

#E65100

Background
#E65100

Honeycomb CSS Code

background: #E65100;
background: radial-gradient(at 76% 72%, #FFC107, transparent 70%), radial-gradient(at 28% 76%, #FF8F00, transparent 70%), radial-gradient(at 24% 28%, #FFE082, transparent 70%), radial-gradient(at 72% 24%, #E65100, transparent 70%), #E65100;

background: rgba(230, 81, 0, 1.0);
background: radial-gradient(at 76% 72%, rgba(255, 193, 7, 1.0), transparent 70%), radial-gradient(at 28% 76%, rgba(255, 143, 0, 1.0), transparent 70%), radial-gradient(at 24% 28%, rgba(255, 224, 130, 1.0), transparent 70%), radial-gradient(at 72% 24%, rgba(230, 81, 0, 1.0), transparent 70%), rgba(230, 81, 0, 1.0);

background: hsla(21, 100%, 45%, 1.0);
background: radial-gradient(at 76% 72%, hsla(45, 100%, 51%, 1.0), transparent 70%), radial-gradient(at 28% 76%, hsla(34, 100%, 50%, 1.0), transparent 70%), radial-gradient(at 24% 28%, hsla(45, 100%, 75%, 1.0), transparent 70%), radial-gradient(at 72% 24%, hsla(21, 100%, 45%, 1.0), transparent 70%), hsla(21, 100%, 45%, 1.0);

background: #E65100;
background: radial-gradient(at 76% 72%, #FFC107, transparent 70%), radial-gradient(at 28% 76%, #FF8F00, transparent 70%), radial-gradient(at 24% 28%, #FFE082, transparent 70%), radial-gradient(at 72% 24%, #E65100, transparent 70%), #E65100;
background: radial-gradient(at 76% 72% in oklch, oklch(84.42% 0.1722 84.93), transparent 70%), radial-gradient(at 28% 76% in oklch, oklch(75.54% 0.1777 59.69), transparent 70%), radial-gradient(at 24% 28% in oklch, oklch(91.31% 0.1188 91.67), transparent 70%), radial-gradient(at 72% 24% in oklch, oklch(63.1% 0.197 40.25), transparent 70%), oklch(63.1% 0.197 40.25);

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

bg-[image:radial-gradient(at_76%_72%,#FFC107,transparent_70%),radial-gradient(at_28%_76%,#FF8F00,transparent_70%),radial-gradient(at_24%_28%,#FFE082,transparent_70%),radial-gradient(at_72%_24%,#E65100,transparent_70%)] bg-[#E65100]

bg-[image:radial-gradient(at_76%_72%,#FFC107,transparent_70%),radial-gradient(at_28%_76%,#FF8F00,transparent_70%),radial-gradient(at_24%_28%,#FFE082,transparent_70%),radial-gradient(at_72%_24%,#E65100,transparent_70%)] bg-[#E65100]

Similar Gradients

More Gradient Presets

FAQ

What is the Honeycomb gradient?