u/DRIFFFTAWAY

I’ve been playing around with mix-blend-mode: difference, and it is a really nice way to create a colour-changing effect without needing complex animation.

The basic idea:

When an element has:

mix-blend-mode: difference;

it reacts visually to whatever is behind it.

So if you have a sticky element, fixed element, cursor, badge, text, icon, or nav item scrolling over different background sections, the colours can automatically invert or shift as it passes over them.

This works especially well with:

position: sticky;

because the element stays in place while the page content moves behind it.

In Webflow, the cleanest way to add this is through the Custom Properties section in the Style panel.

Add:

mix-blend-mode: difference;

You can it at the end of the video.

Small detail, but it can create a really polished interaction with almost no setup.

Claude Design is getting really good at polished landing pages, especially with design systems for consistency.

Flowboard converts Claude Design output into native Webflow elements, with structure in the navigator, styles in the style panel, and GSAP mapped into Webflow’s interactions timeline.

It’s now close to 700 active users, so I thought it was worth sharing here since Claude Design pages usually need to be handed off to code or rebuilt before they can become editable Webflow builds.

https://www.flowboardapp.com/

Claude Design is already pretty good at generating polished HTML/CSS/JS designs.

So I’ve been working on a Claude Design to Webflow integration inside Flowboard.

The process is now basically:

1. Generate the design in Claude
2. Click Import in Flowboard
3. Convert the design
4. Paste it into Webflow

In this example, the layout, responsive navbar, styling, and 3D hover tilt effect all come across into Webflow. Supported GSAP animations can also be mapped into the Webflow Interactions timeline, instead of staying as custom code.

I think this could be useful for Webflow freelancers and agencies who want to use AI-generated designs in real client projects, while still ending up with a Webflow build they can refine, customise, and hand off properly.

For anyone who wants to try it: https://flowboardapp.com

I’m also working on something next that pushes what Webflow sites can do and how they can look and feel. Very excited to show that soon.

Thought I’d share this small snippet.

This adds a 3D hover tilt to any card. No libraries needed.

How to use it:

1. Give your card element this class:hover-tilt-card
2. Add an Embed element somewhere on the page.
3. Paste the code from my comment into the embed.

I’ll put the full snippet in the comments so the post stays readable.

CSS-only subtle glitch text effect in Webflow

I was testing a simple glitch-style headline effect and thought it might be useful to share.

The setup is:

1. Add a heading or text element in Webflow
2. Give it a class: glitch-text
3. Add the CSS in an Embed or page custom code

The effect uses layered text with ::before and ::after, then briefly clips and offsets those layers to create the glitch movement. No JavaScript or animation library needed.

Code snippet below.

Saw this slick ticket hover split effect on CodePen by Cliff Pyles and wanted to see if I could recreate something similar in Webflow:

https://codepen.io/cliffpyles/pen/xbEdVgd

It took a bit of messing around with the structure, positioning, and hover movement, but I’m pretty happy with how close it feels now.

Picked this up in Copenhagen a few years ago for around $100. Always loved this card as it brings back so many great nostalgic memories as a kid. I have wondered though, is this grade fair or harsh? I feel like I have definitely seen cards in worse shape for higher grades. Would like some other opinions please :)

It’s been 2 months since I last posted about Flowboard here. I’ve shipped quite a lot since the original HTML-to-Webflow demo.

The two biggest updates are:

Live Capture
You can capture a component or section from a live website and paste it into Webflow as editable elements and put your own spin on it.

CMS unbinding
If you copy a CMS-bound component and Webflow won’t let you paste it elsewhere because it’s tied to CMS data, Flowboard can now unbind those CMS connections so the layout can be reused more easily.

Would be interested to hear what people think, especially if you work with CMS-heavy Webflow sites.

Link here if you want to try it: https://www.flowboardapp.com