Mesh Gradient Background

Component

A container with a soft, flowing mesh gradient behind its content.

mesh-gradient-background.tsx

import { MeshGradient } from "@paper-design/shaders-react"

import { cn } from "@/lib/utils"

type MeshGradientBackgroundProps = React.ComponentProps<"div"> & {
  colors?: string[]
  distortion?: number
  swirl?: number
  speed?: number
  grain?: number
}

function MeshGradientBackground({
  colors = ["#e0eaff", "#241d9a", "#f75092", "#9f50d3"],
  distortion = 0.8,
  swirl = 0.1,
  speed = 0.6,
  grain = 0.15,
  className,
  children,
  ...props
}: MeshGradientBackgroundProps) {
  return (
    <div
      data-slot="mesh-gradient-background"
      className={cn("relative isolate overflow-hidden", className)}
      {...props}
    >
      <MeshGradient
        aria-hidden
        className="absolute inset-0 -z-10 size-full"
        colors={colors}
        distortion={distortion}
        swirl={swirl}
        speed={speed}
        grainOverlay={grain}
      />
      {children}
    </div>
  )
}

export { MeshGradientBackground }

Installation

npx shadcn@latest add https://shaderscn.com/r/mesh-gradient-background.json

Usage

import { MeshGradientBackground } from "@/components/mesh-gradient-background"

export default function Page() {
  return (
    <MeshGradientBackground className="flex min-h-svh items-center justify-center">
      <h1 className="text-4xl text-white">Hello, gradient.</h1>
    </MeshGradientBackground>
  )
}