Designpedia
All terms
Overlays & Surfaces

Lightbox

also known as image overlay, media overlay

A lightbox is an overlay that shows media (an image, video, or gallery) enlarged and centered while dimming the rest of the page, so you can view it without leaving the current page. It often lets you page through a set of images with arrows. The name comes from the illuminated surface photographers use to view slides.

See it live — shadcn/ui · MUI · Ant Design
Don't confuse it with
A lightbox is essentially a modal specialized for viewing media, whereas a general modal is built for interaction and input. Both dim the background, but a lightbox's job is focused, distraction-free viewing rather than collecting a response.
In the wild
Clicking a photo thumbnail in a gallery that enlarges it over a dark backdrop opens a lightbox.
Tags
Sources