Gradient Border

A card wrapped in a 1px brand gradient ring using a padding-box trick — no extra DOM layers or mask hacks.

Backgrounds

bordergradientcardhighlight

Featured

Gradient border card

One pixel of brand colour around the edge, no extra wrapper divs.

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

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

export function Example() {
  return <GradientBorder />;
}

Install prerequisites

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

More in Backgrounds

Gradient Mesh

Four drifting blurred blobs plus an SVG grain overlay. Renders on the server, costs nothing at runtime, and gets most of the way to a WebGL mesh gradient.

Dot Pattern

A subtle radial-dot background for empty states, hero sections and preview frames. Pure CSS, no image asset.