# Add an interactive shine effect to any element | Wix Studio

**URL:** <https://forum.wixstudio.com/t/add-an-interactive-shine-effect-to-any-element-wix-studio/76948>\
**Category:** Show and tell\
**Tags:** css, wix-studio, code\
**Created:** [March 9, 2026, 1:41pm UTC](https://forum.wixstudio.com/t/add-an-interactive-shine-effect-to-any-element-wix-studio/76948 "2026-03-09T13:41:59Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![noahlovell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/noahlovell/32/118920_2.png) [@noahlovell](https://forum.wixstudio.com/u/noahlovell)\
**Post date:** [March 9, 2026, 1:41pm UTC](https://forum.wixstudio.com/t/add-an-interactive-shine-effect-to-any-element-wix-studio/76948/1 "2026-03-09T13:41:59Z")

</div>

Ever wondered how we built the shine effect badge on the Studio League site? Well now you know!

In this Studio Byte, learn how to add a glowing, mouse‑tracking shine to any element in Wix Studio. We’ll layer shapes and effects, then tie them to cursor movement so the light follows every move - adding extra shine to client sites in more ways than one.

Here’s the code you need:

```CSS
.shine{
    background: linear-gradient(120deg,
    rgba(255,255,255,0)0%,
    rgba(255,255,255,0.8),45%,
    rgba(0,11,255,0)100%);
    filter: blur(20px);
    border-radius: 10px;
    mix-blend-mode: overlay;
}

```

[![](https://us1.discourse-cdn.com/wix/original/3X/2/8/2822c18607b2ab8753246ee331d9ed326b41f7ee.jpeg "Add an interactive shine effect to any element | Wix Studio") ](https://www.youtube.com/watch?v=9Yb42m1HHt0)