Spotlight Card

2025

A card component with a dynamic spotlight effect that follows the cursor. Creates depth and visual interest.

Features

•Cursor-following spotlight
•Customizable spotlight color and size
•Smooth gradient transitions
•Works with any card content

Preview

Open in

Spotlight Effect

Move your cursor around to see the spotlight follow. This creates a beautiful depth effect.

InteractiveCSS-only

Usage

Example

<SpotlightCard className="p-8 border rounded-2xl">
      <h3 className="text-xl font-semibold mb-2">Spotlight Effect</h3>
      <p className="text-gray-600">Move your cursor around to see the spotlight follow.</p>
    </SpotlightCard>