# Spotlight

Source: https://lumeo.nativ.sh/components/spotlight

# Spotlight

A container that draws a radial gradient spotlight chasing the cursor position using CSS custom properties.

## When to Use

-   Hero sections and feature cards to add cursor-reactive depth.
-   Dark-mode landing pages where a subtle glow elevates the design.
-   Wrapping any container where you want to draw attention to the hovered area.

Preview Code

Default Spotlight

### Hover over me

The spotlight follows your cursor.

Copy Code

Preview Code

Custom Color & Opacity

### Violet Spotlight

Color and opacity are both configurable.

Copy Code

## API Reference

Property

Type

Default

Description

ChildContent

RenderFragment?

null

Content rendered inside the spotlight container.

Color

string

"var(--color-primary)"

CSS color of the spotlight gradient center.

Opacity

double

0.15

Opacity of the spotlight glow (0–1).

Radius

int

300

Radius of the spotlight circle in px.

## Related Components

-   [MagneticButton](/components/magnetic-button) — Cursor-reactive button translation effect.
-   [BorderBeam](/components/border-beam) — Animated gradient beam around a container border.