How can I make the blue gradient in the background of my Webflow site follow the cursor all the time, even when hovering over cards or images on the page?

To make a blue gradient background follow the cursor across your Webflow site, even when hovering over elements, you need to set up an interaction based on mouse movement.

​

1. Create the Gradient Background

​

• Add a Div Block to your page that will hold the gradient.
• Set this Div to position: fixed to ensure it covers the entire viewport.
• Add a Background Gradient to this Div.
• Set its z-index to a negative value to ensure it's behind other elements.

​

2. Adjust the Div for Interactions

​

• Make sure the Div Block is full-screen by setting it to width: 100vw and height: 100vh.
• Confirm the z-index is set correctly so the gradient remains in the background.

​

3. Set Up the Mouse Move Interaction

​

• Go to Interactions on the right sidebar of Webflow.
• Choose Element Trigger and select Mouse Move in Viewport.
• Create a New Mouse Move Animation.
• Use Mouse Move Over Element if you want the effect to be limited to a specific area, but generally, for a full-page effect, use Mouse Move in Viewport.

​

4. Define the Mouse Move Animation

​

• Within the animation setup, create actions for both X% and Y% Movement. 
• Adjust the gradient’s position based on mouse movements to create a dynamic effect.
• You can play with the offset values to make the effect more pronounced or subtle.

​

5. Apply the Animation

​

• Apply your newly created animation to the gradient Div.
• Test the interaction by moving your cursor around the page to see the gradient shift accordingly.

​

Summary

​

To have a blue gradient follow the cursor even over elements like cards or images, you should set up a full-screen fixed position Div with a gradient background and apply a mouse move interaction across the viewport for dynamic effects. This ensures the gradient reacts to cursor movements while remaining in the background.