Back to components
Marketing component
Blurred Orb
Gradient-blurred backdrop element — drop behind a hero or section for a soft glow accent.
Install
$ Run in your project root
pnpm dlx shadcn@latest add https://vibekit.desishub.com/r/blurred-orb.jsonWhat it does
- Primary / accent / muted variants using shadcn tokens
- Configurable size via className
- Override gradient via style prop for custom radial-gradients
- Aria-hidden + pointer-events-none — purely decorative
When to use
Use it
Hero backdrops, behind feature cards, beside CTAs — anywhere a flat hero needs subtle depth.
Skip it
Information-dense interfaces where the blur would compete with content.