Gooey Cursor Effect

A fun gooey cursor background effect with SVG filters and CSS blend modes.

Gooey cursor with svg filters and css blend modes

The other day I visited Lorenzo Dal Dasso’s fantastic website and had a lot of fun with the cool cursor effect! Of course I had to try it out and see what crazy stuff I could do with this and after having a peek under the hood, I saw that the wonderful duo @ETStudio5 who made the site used SVG filters and a CSS blend mode. Off we go, let’s have some fun with variations!

Edit: Thomas Aufresne pointed out that the effect was first made by the Lama Lama team on their website! Check it out, it’s an amazing design. Thanks, Thomas, for letting me know!

Lucas Bebber experimented a lot with this kind of gooey effect using SVG filters and you can read about it in the article Creative Gooey Effects.

SVG Filter

The idea is simple: create lots of boxes on the page and when we hover with the cursor, show them. Also apply a nice SVG gooey filter to them. The CSS blend mode adds some extra jazz!

<div class="cursor">
	<div class="cursor__inner">
		<!-- cursor__inner-box elements come here -->
	</div>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<defs>
			<filter id="gooey">
			    <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="3.2" />
			    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -7" result="goo" />
			    <feComposite in="SourceGraphic" in2="goo" operator="atop" />
			</filter>
		</defs>
	</svg>
</div>	

We dynamically add tiny boxes within a grid layout, depending on how much space is available.

Changing the filter and blend mode creates lovely variations that you can adjust to fit your design.

There’s a little easter egg when you click 🙂

Check out the example demos to see some possibilities!

Here’s number one:

And another one with a different look and feel:

And another one with a circle effect:

And another one with a strong shadow:

I really hope you enjoyed this effect!

P.S. Firefox doesn’t play along nicely, so we just show the box fallback without the filter, not bad either 🙂

If you like these kind of experiments, follow us on Twitter and Instagram. Thanks for checking by!

Help spreading the word:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!