Gradient Border

An animated gradient border around any content. The inside stays transparent.

Pro plan

Every component and preset.

gradient-border-demo.tsx

import { GradientBorder } from "@/components/gradient-border";

export function GradientBorderDemo() {
  return (
    <GradientBorder radius={16} className="w-72">
      <div className="rounded-[14.5px] bg-[var(--background)] p-5">
        <p className="font-medium">Pro plan</p>
        <p className="mt-1 text-sm opacity-70">Every component and preset.</p>
      </div>
    </GradientBorder>
  );
}

Installation

pnpm dlx shadcn@latest add https://gradients.sh/r/gradient-border.json

Usage

import { GradientBorder } from "@/components/gradient-border";

<GradientBorder radius={16}>
  <div className="rounded-[14.5px] bg-background p-5">Your content</div>
</GradientBorder>;

The inside stays transparent, so give the content its own background and padding.

Props

Prop	Type	Default
`children` The bordered content. Give it its own padding.	`ReactNode`	`—`
`kind` Which gradient fills the component: one of the six free kinds, or any kind registered with the engine.	`GradientKind`	`"linear-flow"`
`borderWidth` Border thickness in pixels.	`number`	`1.5`
`radius` Corner radius in pixels.	`number`	`16`
`colors` Two to six colours: hex, oklch(), names or var(--token).	`[string, string, ...string[]]`	`["#7c5cff", "#38d6f5", "#ff5ca8", "#ffb36b"]`
`background` Base colour under the gradient.	`string`	`"#7c5cff"`
`speed` 0 to 2. How fast the gradient moves. 0 holds it still.	`number`	`1.2`
`loopSeconds` 4 to 30. The animation repeats exactly every loopSeconds.	`number`	`18`
`scale` 0.25 to 4. Noise frequency: higher means smaller shapes.	`number`	`1.2`
`warp` 0 to 1. Domain-warp strength.	`number`	`0.22`
`grain` 0 to 1. Film grain.	`number`	`0`
`blur` 0 to 1. Softness.	`number`	`0.3`
`seed` Integer seed for the noise field.	`number`	`21`
`dither` Ordered 4×4 Bayer dither.	`{ enabled?: boolean; cell?: number; levels?: number }`	`{ enabled: false, cell: 3, levels: 8 }`
`interaction` 0 to 1 influence of the pointer and of scroll velocity.	`{ pointer?: number; scroll?: number }`	`{ pointer: 0, scroll: 0 }`
`maxDpr` Device pixel ratio cap for the canvas.	`number`	`1.5`
`reducedMotion` "respect" shows one still frame when the user prefers reduced motion.	`"respect" \| "ignore"`	`"respect"`
`className` Classes for the outer element. Size it here; the gradient fills it.	`string`	`—`