▼
Streaming live at 10am (PST)

Cursor blending mode DIfference

Design help Animations & Interactions
#1

Hi!
I’m trying to use the blending mode difference on my cursor, just like in this project
https://cursor-blend.webflow.io/
but I can’t get it to work.

Here is a read-only link: Webflow - Kather-Agency

Here is my public share link: LINK
(how to access public share link)

#2

Hello @David_Pastor,

So to make your cursor work first you need to set the cursor element to display flex, change its opacity from 0 to 100, change the color or the cursor dot to white, and on the custom code apply the css styles to the cursor class, not the cursor-dot class. Also you might want to apply a pointer events none to your cursor so you can click on your links. It should look like this:

<style>
   .cursor {
		mix-blend-mode: difference;
    pointer-events: none;
  } 
 </style>

I hope this helps!

#3

hi Pablo_Cortes thanks for your help!
I made the changes you suggested but it still doesn’t work.

#4

Hey @David_Pastor, that is weird, it worked for me. So now it looks that you removed the embed element from your cursor. So I did a quick video Loom | Free Screen & Video Recording Software All I did was adding an embed element on your cursor with the code I posted above and changed the opacity of the cursor to 100%. Let me know if you have any issues.