Add a mouse‑tracking shine effect to elements

Learn how to add a glowing, mouse‑tracking shine to any element in Wix Studio. In this quick demo, 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.

In this Studio Byte, learn how to create a glowing shine that follows your visitor’s cursor on any element. We’ll set up a highlight layer, connect it to mouse movement, and fine‑tune the motion so the shine feels smooth and realistic. Use this effect on buttons, cards, images, and hero sections to instantly draw attention where you want it.

Here's the code you need:

.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;
}