CSS Glow / Orb Generator

Design beautiful glow and orb backgrounds.
Get Tailwind or CSS code with a single click.

CSS Glow / Orb Generator

Design orb/glow backgrounds here, Tailwind or plain CSS code with a single click.

Preview

DevLab Style Glow

You can think of this area as a hero, tool page, or landing background. Glow settings determine the mood of the page.

Primary Glow
Color
#00ffd0
Opacity
0.18
Boyut
Blur
Position
Secondary Glow
Color
#0096ff
Opacity
0.18
Boyut
Blur
Position
Tailwind Snippet
{/* Primary */} <div className="absolute -top-32 -left-28 w-[360px] h-[360px] bg-[rgba(0, 255, 208, 0.18)] blur-[180px] rounded-full"></div> {/* Secondary */} <div className="absolute bottom-[-50px] right-[-40px] w-[360px] h-[360px] bg-[rgba(0, 150, 255, 0.18)] blur-[180px] rounded-full"></div>
CSS Snippet
/* Container example */ .glow-container { position: relative; overflow: hidden; } /* Primary Glow */ .glow-primary { position: absolute; width: 360px; height: 360px; background: rgba(0, 255, 208, 0.18); filter: blur(180px); border-radius: 9999px; top: -20%; left: -10%; } /* Secondary Glow */ .glow-secondary { position: absolute; width: 360px; height: 360px; background: rgba(0, 150, 255, 0.18); filter: blur(180px); border-radius: 9999px; bottom: -20%; right: -10%; }