Back to shaders

Silk Flow

Customize
#6366f1
#8b5cf6
#ec4899
#0f0f23
1.00
1.00
0.50
1.00

Smooth flowing gradients with soft color blending.

gradientflowsmoothelegantsoftby ShaderDrop

Source Code

Quick Start

1

Download or copy the component file

2

Save to components/SilkFlow.tsx

3

Import and use in your page

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

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