How to Master Cursor-Tracking Glows in Webflow

This tutorial delivers a streamlined, elegant approach to creating a highly sought-after web design feature: a cursor-tracking glow effect that moves fluidly across a grid of cards while remaining perfectly clipped within each card's boundaries. Rather than relying on heavy, complex JavaScript, the lesson demonstrates how to achieve this sophisticated illusion using a smart combination of native Webflow variables, basic interactions, and a few lines of custom CSS.

The core value of this lesson lies in understanding the power of the background-attachment: fixed CSS property paired with radial gradients. By applying this property, the background behaves as if it is attached to the viewport rather than individual elements, allowing all cards to reveal dynamic, cropped portions of a single, shared background layer. Viewers will learn how to map dynamic viewport units (X and Y variables) to cursor movements, driving the center point of the gradient so the glow appears to travel continuously across the entire grid.

By the end of the tutorial, users will have built a fully functional and highly customizable interactive component, complete with hover-state visibility and seamless viewport tracking. Additionally, the video teaches an ingenious method for creating a synchronized "glowing border" by wrapping elements with a one-pixel padding and mathematically increasing the opacity variable. This empowers creators to deliver high-end, multi-layered interactive user experiences efficiently and with zero added interaction complexity.

• Leverage background-attachment: fixed: This CSS property is the secret to the visual illusion, making the radial gradient act as a single, stationary viewport layer that is individually masked by each separate card.
• Control Gradients with Webflow Variables: The CSS radial gradients are dynamically controlled by defining their center coordinates (X and Y), color, and size entirely through Webflow variables, completely removing the need for custom JavaScript.
• Map Interactions to the Viewport: To ensure the glow perfectly follows the cursor across the shared background space, the mouse-move interaction must be bound to the page (viewport) rather than the individual cards or section.
• Manage Visibility via Opacity Variables: A simple section-based hover interaction toggles the alpha channel (opacity) of the glow color from 0% to 15%, ensuring the glow remains completely invisible until the user engages with the grid.
• Create Faux Borders with Padding: A sharp, synchronized border glow is achieved without using standard border properties; instead, a wrapper div with 1px padding and a multiplied opacity variable mimics a dynamic border while running off the exact same animation logic.

• 01:38 - Applying styling to the section_card class, including padding, a 1em bottom margin, background color, and an 8px border radius.
• 01:58 - Setting the fill attribute of the embedded SVG to currentColor so it inherits the text color of its parent element.
• 04:13 - Writing custom CSS for the .section_card class to set background-attachment: fixed and define a radial-gradient as the background image.
• 08:13 - Configuring the X and Y positional variables with default values of 50dvw and 50dvh to center the gradient.
• 08:55 - Setting the initial opacity variable to 0% to control the alpha channel of the glow, making it invisible by default.
• 11:03 - Creating a section-based hover interaction that animates the opacity variable from 0% to 15% over 0.5 seconds with no easing.
• 12:02 - Attaching a "Mouse move in viewport" interaction to the Page trigger (desktop only) to map the cursor's movement.
• 13:16 - Setting a 60% smoothing value on the page move interaction to ensure the glow follows the cursor without excessive delay.
• 13:52 - Animating the X variable from 0dvw to 100dvw and the Y variable from 0dvh to 100dvh to correspond with the edges of the viewport.
• 15:09 - Creating a new section_card-wrapper div block to wrap each card and moving the 1em bottom margin to this wrapper.
• 15:31 - Applying exactly 1px of padding to the wrapper to create a fake border gap between the wrapper and the inner card.
• 16:44 - Multiplying the border glow opacity variable by 5 in the custom CSS logic to make the faked border glow appear significantly brighter and sharper.

Webflow Cursor Tracking Glow Grid Tutorial

This guide outlines how to build a dynamic, cursor-following glow effect across a grid of cards using native Webflow variables, custom CSS, and zero JavaScript.

Step 1: Set Up the Page Structure

(01:03 - 02:18)

• How: Create a section and container, then add a wrapper div with the class section_card_list to act as your grid. Inside, add div blocks with the class section_card. Apply padding on all sides, a 1em bottom margin, a background color, and an 8px border radius to the cards. If using SVG icons, set the fill attribute to currentColor inside the embed.
• Why: This establishes the foundational layout. Applying currentColor to embedded SVGs is a best practice that allows the icon's color to be controlled dynamically simply by changing the text color of its parent element.

Step 2: Apply the CSS and Radial Gradient

(02:40 - 07:40)

• How: Using an HTML Embed, write a custom CSS rule targeting the .section_card class. Add the property background-attachment: fixed and define a radial-gradient as the background image. Format the radial gradient to center at dynamic variables (var(--x) and var(--y)), starting with a glow color variable that fades to transparent based on a glow size variable.
• Why: Setting background-attachment: fixed is the core secret of this effect. It makes the background render relative to the viewport rather than the individual card. This forces all cards to display different cropped portions of one single, shared background layer, making the glow appear continuous as it moves across the grid boundaries.

Step 3: Configure Webflow Variables

(07:56 - 09:37)

• How: Open the Webflow Variables panel and create a collection (e.g., "glow background properties"). Set the x variable to 50dvw and the y variable to 50dvh. Create an opacity variable and set its default to 0%. Create a glow_size variable to determine the spread.
• Why: These variables allow Webflow to control the gradient dynamically without custom JavaScript. The X and Y default values center the glow in the viewport. Setting the initial opacity to 0% ensures the alpha channel of the glow color is transparent, hiding the effect until the user interacts with it.

Step 4: Create the Hover Visibility Interaction

(10:08 - 11:25)

• How: Select the main section and add a "Mouse hover" interaction, restricted to the desktop breakpoint. Create a "glow on" animation that targets the opacity variable, changing it from 0% to 15% over 0.5 seconds with no easing. Create a corresponding "glow off" animation that returns the opacity to 0%.
• Why: You only want the glow to be visible when the user is actively engaging with the card grid. Animating the opacity variable gracefully fades the unified background effect in and out. Touch devices don't have hover states, so this is limited to desktop.

Step 5: Map Cursor Movement to the Viewport

(11:44 - 14:15)

• How: Create a "Mouse move in viewport" interaction and attach it to the Page trigger, not the section (desktop only). Set the smoothing to 60%. Animate the x variable from 0dvw (at 0% horizontal movement) to 100dvw (at 100% horizontal movement). Animate the y variable from 0dvh (at 0% vertical movement) to 100dvh (at 100% vertical movement).
• Why: Because background-attachment: fixed positions the gradient relative to the viewport, the interaction tracking must also be bound to the entire viewport (the page) to keep the cursor and the center of the radial gradient perfectly synchronized. The 60% smoothing ensures the glow follows the cursor fluidly without excessive delay.

Step 6: Add the Faux Glowing Border

(14:49 - 17:59)

• How: Wrap each .section_card in a new div block called .section_card-wrapper. Move the 1em bottom margin to the wrapper. Give the wrapper exactly 1px of padding on all sides, an 8px border radius, and an almost transparent background color. In your custom CSS embed, target the wrapper and apply the exact same radial gradient logic, but multiply the opacity variable by 5.
• Why: You aren't using CSS borders; the 1px padding creates a tiny gap between the wrapper and the inner card that fakes a border. Multiplying the opacity by 5 makes this faked border glow much sharper and brighter than the card's inner glow. Best of all, because the wrapper shares the same X and Y variables, the border perfectly syncs with the existing mouse movement logic with zero added interaction complexity.

You can achieve this by applying a CSS radial gradient as a background image to your cards and setting its background-attachment property to fixed. Then, use Webflow variables for the X and Y coordinates of the gradient's center and map them to a page-level mouse movement interaction.

Apply the background-attachment: fixed CSS property to the cards containing the background. This makes the background render relative to the viewport instead of the element itself, allowing all cards to display different cropped portions of one continuous, shared background layer.

Create a "Mouse move in viewport" interaction and attach it to the Page trigger rather than a specific element. Map the horizontal (X) and vertical (Y) movement variables from 0 to 100 dynamic viewport units (dvw and dvh) to correspond exactly with the viewport's far edges.

Wrap your card element in a new div block and apply exactly 1 pixel of padding to this wrapper to create a fake border gap. Apply a cursor-tracking radial gradient to this wrapper and multiply its opacity variable by five to make the faked border glow appear significantly brighter and sharper.