Build a spotlight image reveal with CSS masks
A moving spotlight can reveal a different landscape without moving either image. Stack two matching views, apply a radial mask to the upper one, and update its position with JavaScript. In our experiment, a grey wireframe terrain sits underneath a green landscape. The reveal is a change in visibility, rather than a 3D lighting simulation. Try the complete React demo . 1. Start with two matching…
To create a visual effect where a spotlight reveals a different landscape without moving either image, two matching views are stacked. One layer, the base, is a grey wireframe terrain while the other, the reveal, shows a green landscape. By using CSS masks, the upper layer can be revealed by adjusting its position with JavaScript.
The mask is applied to the upper layer, creating a radial gradient that fades from black to transparent, allowing the lower layer to become visible as the mask is revealed. Pointer events are used to update the mask's position in real-time, simulating the appearance of a moving spotlight.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
