# Spotlight

> Dark backgrounds with a tight radial light source illuminating content — as if each element sits on a studio stage, everything else fading to black.

- Category: Light & surface
- Era: 2018–present
- Origin: Theatre stage lighting; product photography studio setups
- Lesson: https://design.dawit.dev/styles/spotlight
- Try it: https://design.dawit.dev/styles/spotlight?style=spotlight

## Where it came from

Spotlight design translates theatrical and product photography lighting conventions to the screen. A dark vignette surrounds the lit subject, concentrating attention. It appeared in luxury product sites, game menus, and cinematic app onboarding, usually alongside a limited palette and strong drama. A cursor-following spotlight requires JavaScript; CSS can fake it convincingly with per-element :hover radial highlights and a fixed vignette.

## How to spot it

- Very dark, near-black background with a radial vignette
- Tight radial gradient light source at the subject centre
- High contrast: bright illuminated subject against near-invisible surrounds
- Often monochrome or one accent colour — the light is the palette

## Strengths

- Extremely focused attention — one thing at a time
- Premium, cinematic quality
- Works powerfully for single-product hero moments

## Weaknesses

- Low information density — dark surrounding space is visually expensive
- A cursor-follow glow requires JS and has keyboard-accessibility challenges
- Hard to implement authentically in pure CSS at full fidelity

## In the wild

- Luxury product launch landing pages
- Game title screens and menu transitions
- Cinema and event booking flows

## Use it when

Hero moments or landing pages where one thing deserves all the attention and drama is not just appropriate but required.

## Related styles
[Dark / OLED](https://design.dawit.dev/styles/dark-oled.md), [Neon Glow](https://design.dawit.dev/styles/neon-glow.md), [Light Leak](https://design.dawit.dev/styles/light-leak.md)