Your ImageYour Image
  • About
  • Templates10
  • Blocks81New
  • Icons1635
  • Graphics4K
  • Components107New
  • About
  • Components
  • Pricing
  • Contact
Book an Intro call
Book an Intro call
  • About
  • Works
  • Pricing
  • Templates
  • Blocks
  • components
  • Graphic
  • Backgrounds
  • Designs
  • Icons
  • Logos
  • Flags
  • Privacy
  • Terms
  • Contact
© 2025Made with by Ali Imam

  • Gradient Mesh
  • Gradient Wave
  • Shader Ripple
  • Shader Lines
  • Shader RGB
  • Particles Highlight
  • Particle Circle
  • Void Animation
  • Gradient Bars
  • Render Canvas
  • Fireball
  • Scroll Progress
  • Shine Border
  • Dot Pattern
  • Grid Pattern

Gradient Mesh

PreviousNext

Namespaced registries let you configure multiple resource sources in one project.

Installation

pnpm dlx shadcn@latest add https://aliimam.in/r/gradient-mesh.json

Usage

import { GradientMesh } from "@/components/gradient-mesh";
export default function Page() {
  return (
    <div>
      <GradientMesh
        colors={["#3b2a8d", "#aaa7d7", "#f75092"]}
        distortion={5}
        swirl={0.5}
        speed={1}
        scale={1}
        offsetX={0}
        offsetY={0}
        rotation={90}
        waveAmp={0.1}
        waveFreq={10}
        waveSpeed={0.2}
        grain={0.06}
      />
    </div>
  );
}
Pixelated GridGradient Wave

On This Page

InstallationUsage