<div className="absolute inset-0 -z-10 overflow-hidden">
  <div className="absolute -top-1/4 -left-1/4 w-[600px] h-[600px]
                  bg-primary/30 rounded-full blur-3xl" />
  <div className="absolute -bottom-1/4 -right-1/4 w-[500px] h-[500px]
                  bg-accent/20 rounded-full blur-3xl" />
</div>

<motion.div
  className="absolute w-[600px] h-[600px] bg-primary/30 rounded-full blur-3xl"
  animate={{ x: [0, 100, 0], y: [0, -50, 0] }}
  transition={{ duration: 20, repeat: Infinity, ease: "easeInOut" }}
/>

<div
  className="absolute inset-0 opacity-[0.03] pointer-events-none"
  style={{
    backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
  }}
/>

function HeroBackground() {
  return (
    <>
      <div className="absolute inset-0 -z-20 bg-gradient-to-b from-background to-muted" />
      <div className="absolute inset-0 -z-10 overflow-hidden">
        <div className="absolute -top-1/4 -left-1/4 w-[600px] h-[600px] bg-primary/20 rounded-full blur-3xl" />
        <div className="absolute -bottom-1/4 -right-1/4 w-[500px] h-[500px] bg-accent/15 rounded-full blur-3xl" />
      </div>
      <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.02] mix-blend-overlay" />
    </>
  );
}

<div className="bg-primary/20 dark:bg-primary/30 blur-3xl" />

[ ] Multiple layers with z-index separation
[ ] Gradient orbs with blur (blur-2xl or blur-3xl)
[ ] Colors from CSS variables
[ ] Overflow hidden on container
[ ] Dark mode variant defined