Free Component

3D Spotlight Pricing Card

A dark pricing tier card with a dynamic mouse-following radial spotlight glow, animated border highlight, and recommended badge.

dark
pricing
card
3d
spotlight
hover
saas

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="spotlight-card" id="spotCard">
  <div class="card-glow" id="cardGlow"></div>
  <div class="card-inner">
    <div class="card-top">
      <span class="badge-rec">Most Popular</span>
      <h3 class="tier-name">Pro Workspace</h3>
      <p class="tier-desc">Designed for scaling teams requiring high throughput and priority support.</p>
    </div>

    <div class="price-box">
      <span class="curr">$</span>
      <span class="amount">49</span>
      <span class="per">/ month</span>
    </div>

    <ul class="features">
      <li><span>✓</span> Unlimited projects &amp; API keys</li>
      <li><span>✓</span> 1,000,000 monthly workflow executions</li>
      <li><span>✓</span> 24/7 dedicated Slack &amp; video support</li>
      <li><span>✓</span> 99.99% uptime SLA guarantee</li>
    </ul>

    <button class="cta-glow-btn">Start 14-Day Free Trial &rarr;</button>
    <div class="foot-note">No credit card required. Cancel anytime.</div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create a dark 3D spotlight pricing card with mouse-follow radial glow in HTML, CSS and vanilla JavaScript.

Requirements:
- Dark navy container (#0b1020) with 24px radius, soft shadow, and subtle hover elevation.
- A radial glow circle that dynamically follows the cursor across the card surface on mousemove.
- Tier name, recommended badge pill, large price display ($49/month), and feature checklist with purple checks.
- Gradient primary CTA button with hover elevation and box shadow.
- Reassurance copy beneath the button.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1
Set up a card with relative positioning and overflow hidden.
2
Position an absolute circle with radial gradient that is tracked on mousemove.
3
Calculate local cursor offset relative to the card's getBoundingClientRect().
4
Place text and button layers inside a z-index container so the glow remains underneath.

Customisation tips

Use pointer-events: none on the glow element so it doesn't interrupt card interactions.
Adjust the radial-gradient alpha to create subtle sheen rather than overpowering background colors.