{
  "id": 18972026,
  "title": "Build a spotlight image reveal with CSS masks",
  "url": "https://urgent.news/2026/11/08/build-a-spotlight-image-reveal-with-css-masks",
  "topic": "culture",
  "section": "Culture",
  "published": "2026-11-08T16:23:21.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/leoniebuilds/build-a-spotlight-image-reveal-with-css-masks-40l7"
  },
  "original_language": "en",
  "account": "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.",
  "summary": "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…",
  "key_points": [
    "Two matching views stacked: grey wireframe terrain and green landscape",
    "CSS masks used to reveal upper layer by adjusting position with JavaScript",
    "Pointer events update mask position in real-time, simulating moving spotlight"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}