Progressive Blur Card

Progressive Blur Card A clean and modern card component with a smooth progressive blur effect that makes images pop while keeping text perfectly readable. Great for travel apps, portfolios, and landing pages. This card comes with a subtle gradient overlay, bold typography, and a simple call-to-action button that feels natural on any UI.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Progressive Blur Card to your project and fits it to your theme.

import { ProgressiveBlurCard } from '@/components/ui/progressive-blur-card';

export default function Demo() {
  return (
    <div className="min-h-screen w-full bg-white flex items-center justify-center p-8">
      <ProgressiveBlurCard />
    </div>
  );
}