Neon Glow Effect in Webflow — Using Variables, Modes & Component Variants

Learn how to recreate Webflow’s classic Neon Glow Effect — but this time, powered entirely by Variables, Modes, and Component Variants.

In this tutorial, we’ll rebuild the glowing border from Webflow’s previous website and turn it into a modular system that you can update with just one color.

You’ll learn how to:

✅ Use CSS Variables and color-mix() to generate consistent glow layers
✅ Organize and group your variables in Webflow’s Variables panel
✅ Create color modes to switch between palettes instantly
✅ Combine components and variants to control glow colors across multiple elements

Everything is done natively in Webflow — no custom code required.

🎨 Colors used in the demo:

Blue #1F51FF · Pink #FF1493 · Gold #FFC42E · Green #39FF14 · Red #FF3131

📂 Helpful Resources:

Supasaito: https://www.supasaito.com?utm_source=...
Link to the cloneable: https://webflow.com/made-in-webflow/w...

🔥 If you liked the video, feel free to leave a comment, hit the like button, and subscribe to my channel. 😁

---

My Webflow public profile:
https://webflow.com/@francescocastro

We can talk on LinkedIn:
  / francescocastronuovo  

Or we can get to know each other on X:
https://x.com/francescoflow

Or why not? Even on Instagram:
  / francescocastronuovo  

---

0:00 Intro
1:22 Analyzing the structure of the page
9:44 Creating the variables and explaining the color-mix() function
17:02 Setting up the hover state of the cards
18:44 Creating a new variable mode
20:28 Adding a variable mode to the card
21:37 Applying different modes to different cards #1: Combo classes
22:44 Applying different modes to different cards #2: Component variants
26:00 Outro

#webflow #madeinwebflow #webflowtutorial #nocode