Add an interactive shine effect to any element | Wix Studio

Show and tell
, ,
1

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:

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