FreeBackgrounds

Background Gradient

Use this component around pricing cards, product cards, feature cards, or media panels when you want a polished gradient frame.

ReactTailwind CSSGradientCard

Product Card

A glowing gradient wrapper for premium cards.

Overview

A gradient border wrapper for cards, buttons, and premium product previews.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

No additional packages required after Tailwind CSS setup.

Usage

tsx

<BackgroundGradient />

Background Gradient.tsx

tsx

export function BackgroundGradient() {
  return (
    <div className="rounded-2xl bg-gradient-to-br from-lime-300 via-sky-400 to-purple-500 p-px shadow-2xl shadow-lime-300/20">
      <div className="w-64 rounded-2xl bg-zinc-950 p-5 text-white">
        <div className="mb-4 h-24 rounded-xl bg-gradient-to-br from-zinc-800 to-black" />
        <h3 className="text-lg font-bold">Product Card</h3>
        <p className="mt-2 text-xs text-zinc-400">
          A glowing gradient wrapper for premium cards.
        </p>
        <button className="mt-4 rounded-md bg-white px-3 py-1.5 text-xs font-bold text-black">
          Buy now
        </button>
      </div>
    </div>
  );
}