Back to shaders

Gradient Orbs

Customize
#ff6b00
#ff0844
#ffb700
#ff4500
#0a0a0a
1.00
0.70
1.00
1.00
1.00
0.50
0.00
0.30
0.50
0.30
0.30
6.00

Flowing gradient blobs with metaball blending and organic motion.

gradientblobssmoothmodernmetaballby ShaderDrop

Source Code

Quick Start

1

Download or copy the component file

2

Save to components/GradientOrbs.tsx

3

Import and use in your page

page.tsx
import { GradientOrbs } from "@/components/GradientOrbs"

export default function Page() {
  return (
    <div className="relative min-h-screen">
      <GradientOrbs className="absolute inset-0 -z-10" />
      {/* Your content here */}
    </div>
  )
}
GradientOrbs.tsx