Does this require any npm libraries or frameworks?

No. The generated code is 100% vanilla CSS and plain JavaScript, compatible with React, Next.js, Vue, Svelte, or static HTML.

Updated: August 2026 • Verified v1.2

Pure CSS & JS Radial Spotlight Mouse-Hover Card Generator

Creative & DesignDesign

Local Browser Execution: Your input is processed locally in your browser and is not sent to UTL servers.

background: radial-gradient(radius circle at var(--mouse-x) var(--mouse-y), color, transparent 80%);

Was this calculation helpful?

Understanding Your Results

Customizes spotlight color, radius, opacity, card background, and corner radius, displaying a real-time mouse-tracking preview card and generating production-ready CSS and JS code.

Practical Guidance & Next Steps

Using CSS custom properties (`--mouse-x`, `--mouse-y`) updated on `mousemove` allows smooth hardware-accelerated rendering without DOM re-renders.

What is this?

A web design utility that creates interactive cursor-following radial spotlight illumination effects for modern web cards and UI components.

How does it work?

1. Customize spotlight color, radius, and opacity. 2. Hover over the interactive preview card to test cursor illumination. 3. Copy the clean CSS and vanilla JS snippet.

Why use it?

Adds polished, high-converting modern interactivity to landing page cards with zero external dependencies.

Technical Scope & Calculation Limitations

Generates pure CSS and vanilla JavaScript.

Frequently Asked Questions

A tiny vanilla JavaScript listener calculates the cursor position relative to the card (`clientX - rect.left`) and updates CSS custom properties `--mouse-x` and `--mouse-y` in real time.

Windows Desktop & Widget Options