Uploaded March 2026 | Updated September 2026, 3 weeks ago

---

Turn any section into an interactive moment with a moving spotlight effect that reveals different content with every move of the cursor. In this tutorial, you’ll design a dark overlay, cut out a circular “window,” and connect it to the cursor so the spotlight tracks every move. Use this setup to add interest to any site and keep site visitors engaged with your content.

Here's the code:
.focus {
box-shadow:
0px 0px 0px 100vw rgb(73, 30, 13), /* outer shadow (creating the hole effect) */
inset 0 0 100px black; /* inner shadow */
border-radius: 100%;
pointer-events: none;
}
—

Learn more about Wix Studio:
wix.com/studio
Get started with our Essentials course:
wix.to/gT8VY7c
Join the Wix Studio Community:
forum.wixstudio.com

Follow us on social media:
➔ Instagram: instagram.com/wixstudio
➔ X: twitter.com/wixstudio
➔ TikTok: tiktok.com/@wixstudio
➔ Facebook: facebook.com/WixStudio
➔ Discord: discord.com/invite/wixstudio

About Wix Studio:
Wix Studio is the website building platform for professional designers, developers, and marketers. With high-end design capabilities, streamlined workflows and robust business tools, it empowers freelancers and agencies to build, manage and scale exceptional websites with maximum efficiency.

Subscribe to our channel:
➔ youtube.com/@WixStudio?sub_confirmation=1