White Arrow icon
Back to all Elements

Cursor Blend

A few short lines of code, to replace the pointer with an interactive color element.

1. Giving an element a mix-blend-mode property so it will change it's color by the color of the element behind.

We start by creating a div and giving it the class .cursor and these properties:

  • width: 30px
  • height: 30px
  • margin-top: -15px
  • margin-left: -15px
  • position: absolute
  • z-index: 9999
  • background: white
  • border-radius: 30px

Now we need to add a bit of code for that to work well.

1st part is making sure we won't get horizontal scroll bar once the element (pointer) is outside of the viewport.

2nd part is giving the .cursor class the mix-blend-mode and making it "transparent" so any clicks of the actual pointer will "go through" to the element below.

<style>

 

 ‍ html,

 body {

   max-width: 100%;

   overflow-x: hidden;

 }

 .cursor {

   mix-blend-mode: difference;

   pointer-events: none;

 }

</style>

Copy

2. Replacing the pointer with the new element.

Now we need edit the body TAG to make the cursor "disappear"

Webflow's Style panel, body TAG selected

And now all that is left to do is to "glue" the .cursor element to the mouse movements with a bit of JavaScript

<script>

 ‍

 var $cursor = $('.cursor');‍

 

 function moveCursor(e) {

   $cursor.css({

     "top": e.pageY,

     "left": e.pageX

   });

 }‍

 

 $(window).on('mousemove', moveCursor);‍

</script>

Copy

Preview:

browser mockup
Share:
Heart icon

Destin's Youtube channel Smarter Every Day is one of my favourite places on the web.

Might also interest you:

Dynamic Height

Code
Tricks
JavaScript

A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
Blue arrow iconWhite Arrow icon

Desktop Grid, Mobile Slider

Cloneable
Tricks
Layout

Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.

Read more
Blue arrow iconWhite Arrow icon

Maintain Form Height on Success

Code
jQuery

Using a little bit of jQuery to adjust the success message height

Read more
Blue arrow iconWhite Arrow icon