Create an interactive spotlight reveal effect | Wix Studio

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: https://www.wix.com/studio Get started with our Essentials course: https://wix.to/gT8VY7c Join the Wix Studio Community: https://forum.wixstudio.com Follow us on social media: ➔ Instagram: https://www.instagram.com/wixstudio ➔ X: https://www.twitter.com/wixstudio ➔ TikTok: https://www.tiktok.com/@wixstudio ➔ Facebook: https://www.facebook.com/WixStudio ➔ Discord: https://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: ➔ https://www.youtube.com/@WixStudio?sub_confirmation=1