Cursor with shadow?

Hello!

Is it possible to create this shadow / blur effect on this cursor?

This is the codepen that I am using:

and trying to make the cursor like that:

image

I mean the shadow effect, not the line that is crossing it!

Maybe have a play around with something like this.

.custom-cursor {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background-color: white;
  transition: transform 350ms ease;
  transform: translate(-50%, -50%) scale(.3);
  z-index: 1000;
}
.custom-cursor:before{
  content:"";
  mix-blend-mode:difference;
  margin:auto;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
    box-shadow:0 0 20px 40px rgba(255,255,255,1);
  border-radius: 50%;
  filter:blur(5px);
}

2 Likes

Yes it’s perfect!!! thank you!!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.