How to Build a Logo Glow Hover Effect in Webflow

This tutorial provides a comprehensive guide to constructing sophisticated, "glowing" logo animations within Webflow, utilizing a completely no-code approach. Francesco demonstrates how to elevate standard web elements by combining fundamental transform operations with advanced visual techniques directly in the Webflow Designer. The core value of this lesson lies in demystifying the integration of complex CSS features—specifically custom properties for masking and blur backdrop filters—to achieve a high-fidelity aesthetic that creates a sense of depth and dimensionality usually reserved for custom-coded implementations.

The technical instruction focuses heavily on the structural hierarchy required to support these advanced effects. Viewers will learn to manipulate the relationship between relative and absolute positioning to create a multi-layered canvas where gradient fills and specific aspect ratios interact seamlessly. A pivotal portion of the training covers the use of Webflow custom properties to apply mask images, allowing designers to transform simple div blocks into intricate, logo-shaped elements that serve as the foundation for the glowing visual effect.

Finally, the video culminates in the creation of a dynamic mouse hover interaction that brings the static design to life. By staggering opacity, scale, and movement across multiple layers, the user learns to build a responsive animation that reacts organically to cursor movement. The tutorial covers the entire animation lifecycle—from establishing initial states to applying "ease out cubic" timing functions—empowering designers to build engaging, interactive components that significantly enhance the visual storytelling of their digital products.

• Leveraging Custom Properties for Masking To bypass standard image limitations, the tutorial teaches how to use Webflow’s custom properties to apply CSS masking. By manually inputting properties like mask-image, mask-repeat (set to no-repeat), and mask-size, you can constrain linear gradients to the shape of a logo, which is essential for the glowing effect.
• Creating Depth with Staggered Transforms A flat design is transformed into a 3D-like experience by animating three duplicate layers with progressively different values. During the hover state, the layers move downward at varying rates (35%, 65%, and 90%) and scale down effectively, creating a perception of separation and depth.
• Strategic Use of Backdrop Filters The soft, luminous "glow" is achieved not through shadow properties, but by layering elements with the backdrop-filter: blur property. By assigning different blur values (e.g., 9px, 7px, 5px) to different combo classes, the design achieves a graduated, realistic light dispersion effect.
• Mastering Positioning Context Success depends on strict layout discipline; specifically, setting the parent container (the glow wrapper) to position: relative and the child masking layers to position: absolute. This ensures that all visual effects remain perfectly aligned with the reference element regardless of the viewport size or interaction state.
• Polished Interaction Workflows To ensure professional-grade interactivity, the tutorial emphasizes the importance of defining "Initial States" for opacity and transforms (set to 0% and 1, respectively). Furthermore, using specific easing functions like "ease out cubic" ensures the transition between the hover-in and hover-out states feels fluid and organic rather than mechanical.

Layout and Style Configuration

• 03:37 - Set the position of the "outermost blur" element to Absolute and apply a 30px Blur Backdrop Filter to create the initial atmospheric glow.
• 04:30 - Set Pointer Events to None on the top blur layer to ensure the cursor can interact with the logo elements underneath.
• 05:56 - Set the "glow effect wrapper" position to Relative so it acts as the reference point for the absolutely positioned children inside.
• 06:24 - Define the Aspect Ratio (e.g., 108/19) on the wrapper to match the exact dimensions of the logo image being used.
• 08:13 - Assign progressive Opacity values of 15%, 10%, and 4% to the three duplicate wrapper layers to create depth.

Webflow Custom Properties (Masking)

• 09:54 - Add the mask-image custom property by inputting URL(...) with the link copied from the assets panel.
• 10:32 - Add the mask-repeat custom property and set the value to no-repeat so the gradient constrains strictly to the logo shape.
• 10:59 - Add the mask-size custom property and set the value to 100%.

Blur and Centering Logic

• 12:28 - Center the blur mask element by setting Left to 50% and adding a Move Transform of -50% on the X-axis.
• 12:52 - Apply specific Backdrop Filter blur values to the combo classes of the inner layers: 9px, 7px, and 5px.

Interaction and Animation Setup

• 14:31 - Define the Initial States: Set Move to 0%, Scale to 1, and Opacity to 0% for all relevant layers.
• 15:53 - Animate the first layer layer: Set Move to 35% and Scale to 0.95.
• 16:07 - Animate the second layer: Set Move to 65% and Scale to 0.9.
• 16:24 - Animate the third layer: Set Move to 90% and Scale to 0.8.
• 16:50 - Select the transform actions and set the easing function to ease out cubic for smooth movement.
• 17:37 - Create the "Hover Out" animation by resetting Move to 0%, Scale to 1, and Opacity to 0%.

Technical Guide: Creating a Glowing 3D Logo Animation

Phase 1: Structure and Layout

This phase establishes the positioning context required for the 3D effects to work correctly.

1. Configure the "Outermost Blur" Layer

• How: Create a div block to act as an atmospheric glow layer. Set its position to Absolute and select the "Full" option to fill the parent section. Apply a Backdrop Filter with a Blur set to 30px. Crucially, set Pointer Events to None.
• Why: This layer sits on top of the logo to create a soft, hazy "atmosphere." Setting pointer events to none is essential; without it, this invisible layer would block the mouse cursor from interacting with the logo underneath, breaking the hover trigger.

2. Set Up the Glow Effect Wrapper

• How: Create a div block named glow effect wrapper. Set its Position to Relative. Define the Aspect Ratio to match your logo exactly (e.g., 108/19).
• Why: Setting the position to Relative turns this element into the coordinate system (the anchor) for all the animated children inside. The Aspect Ratio ensures the container perfectly hugs the shape of the logo without collapsing.

3. Stack the Logo Layers

• How: Inside the wrapper, place three duplicate div blocks named glow effect masked wrapper. Set their position to Absolute and Full. Apply decreasing Opacity values to each duplicate: 15%, 10%, and 4% respectively.
• Why: These layers will separate during the animation to create depth. The decreasing opacity mimics the way light fades as it moves further away from the source.

Phase 2: Advanced Masking & Styling

This phase uses Webflow Custom Properties to turn standard div blocks into the shape of your logo.

4. Apply the Logo Mask (The "No-Code" Trick)

• How: Select the inner element (glow effect masked). Go to the Custom Properties section at the bottom of the Style panel. Add the following three properties:

1. mask-image: Set the value to URL(...). You can get this URL by going to the Assets panel, clicking the settings cog on your logo image, and clicking "Copy Link".
2. mask-repeat: Set the value to no-repeat.
3. mask-size: Set the value to 100%.

• Why: This constrains the background (e.g., a linear gradient) to the shape of your PNG/SVG logo. It allows you to style the "logo" with CSS gradients, which isn't possible with a standard Image element.

5. Configure the Inner Blur Masks

• How: Inside the masked wrappers, add a blur mask element. Set the Width to a large arbitrary value like 90vw. Center it by setting Left to 50% and applying a Transform Move of 50% on the X-axis.
• Why: A standard width of 100% might abruptly cut off the blur effect at the edges of the container. Using a large viewport width ensures the blur fades out naturally. Centering with transforms ensures it stays aligned regardless of screen size.

6. Apply Staggered Blurs

• How: Use combo classes for each layer's inner blur element. Apply Backdrop Filter: Blur values of 9px, 7px, and 5px respectively to the three layers.
• Why: Different blur amounts create a realistic sense of volume and focus variation between the layers.

Phase 3: Interaction and Animation

This phase brings the static layers to life using mouse interactions.

7. Define Initial States

• How: Select the glow effect wrapper and add a Mouse Hover interaction. Create a new animation named "Logo On Hover". Select all three masked wrapper layers and the outermost blur. Set their Initial State:‍
  
  • Move: 0% (y-axis)‍
  • Scale: 1‍
  • Opacity: 0%.

• Why: Initial states prevent the animation from "jumping" when the page loads. It defines exactly how the elements should look before the user interacts with them.

8. Build the Hover-In Animation

• How: Create the active hover state by animating the layers with progressive values:‍
  
  • Layer 1: Move 35%, Scale 0.95.‍
  • Layer 2: Move 65%, Scale 0.90.‍
  • Layer 3: Move 90%, Scale 0.80.‍
  • Outermost Blur: Opacity 35%.‍
  • Easing: Select all transform actions and apply ease out cubic.

• Why: Moving the layers at different speeds (35%, 65%, 90%) creates a parallax effect that simulates 3D depth. Scaling them down simulates them receding into the background.

9. Build the Hover-Out Animation

• How: Create a "Start Animation" for On Hover Out. Duplicate the previous animation. Delete the initial states. Set all Move transforms back to 0%, Scale to 1, and Opacity to 0%.
• Why: This ensures the logo smoothly snaps back to its original, flat state when the mouse leaves the area.

You can achieve this by using Webflow custom properties to apply a mask-image to a gradient-filled div, constraining the color to your logo's shape. Layer multiple copies of this element with backdrop-filter: blur and animate their move and scale properties on hover to create a dynamic, glowing 3D effect.

In the Style panel, add Custom Properties for mask-image (set to URL(...) with your asset link), mask-repeat (set to no-repeat), and mask-size (set to 100%). This technique allows you to shape linear gradients or other backgrounds using a specific PNG or SVG asset directly within the Designer.

Stack duplicate layers with progressive opacity values (e.g., 15%, 10%, 4%) and set their position to absolute inside a relative parent. On hover, trigger an interaction that moves each layer downward at different percentages (35%, 65%, 90%) while scaling them down using "ease out cubic" easing.

Set the element's position to absolute and define its left offset property to 50%. Then, apply a transform move of -50% along the X-axis; this combination ensures the blurred glow remains perfectly centered relative to its parent container regardless of the element's specific width.