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?
TL;DR
- Add a
divwith a blue gradient style and set it tofixedposition with full viewport coverage and a lower Z-index. - Insert custom JavaScript in the
Before </body>tag to track mouse movement and update the gradient position. - Publish and test to ensure the gradient follows the cursor properly.
To make a blue gradient background follow the cursor on your Webflow site, including when hovering over other elements, follow these steps:
1. Create the Gradient Layer
- Add a new
div: Go to your Webflow Designer and insert a newdivelement that will serve as the gradient background. - Set the gradient style: Style this
divwith your desired blue gradient. Adjust the gradient direction and colors as needed.
2. Position the Gradient Layer
- Set the position to
fixed: Ensure thedivis positioned fixed, covering the whole viewport. You can do this by setting the position toFixedand adjusting the width and height to100vwand100vh, respectively. - Adjust Z-index: To ensure your gradient layer stays behind other content, set a lower Z-index.
3. Custom Code for Cursor Tracking
- Add custom code: You'll need custom JavaScript to move the gradient according to the mouse position.
- Insert code into
Before </body>tag: Go to your Webflow Project Settings, find the custom code section, and insert your JavaScript snippet to track the cursor.- You can use a script like the following:
```javascript
document.addEventListener('mousemove', function(e) {
let x = e.clientX / window.innerWidth * 100;
let y = e.clientY / window.innerHeight * 100;
document.querySelector('.your-gradient-class').style.backgroundPosition = ${x}% ${y}%;
});
```
- Reference your gradient layer: Replace
.your-gradient-classwith the actual class name you used for yourdiv.
4. Publish and Test
- Publish your site: Make sure to publish your Webflow project to see the changes.
- Test cursor interaction: Verify that the gradient follows the cursor even when hovering over other elements.
Summary
To create a background gradient that follows the cursor, you need to create a div with a gradient, position it fixed behind all other elements, and implement custom JavaScript to track mouse movements. This ensures the gradient shifts correspondingly across the viewport.
