A scalable svg spotlight mask using inline SVG, reusable strokes, masks or filters.
Difficulty: medium
Type: Frontend Effect
Status: Pro Membership Required
Unlock the complete premium library, future Pro releases and commercial usage across unlimited client projects.
1. Add an HTML widget in Elementor.
2. Paste the HTML code into the widget.
3. Add the CSS code to Elementor Custom CSS or your website stylesheet.
4. Keep the SVG inline if you want the CSS selectors and animations to affect its paths.
5. Replace example text, links and labels with your own content.
6. Test the SVG effect on desktop, tablet and mobile.
The effect works without JavaScript. Add a useful aria-label for meaningful graphics or aria-hidden for decorative shapes.