Dynamic Duotone CSS Filters

Please excuse the poor colour choices, but the concept is working and modelled on code that I took from this website: https://cssduotone.com/

I’m sure it could be taken up a level with some toggle switches that allow you to change the blend modes.

You can find the share link here: https://preview.webflow.com/preview/duotone-filters?preview=ef964ab7fb212b8416d07c8696ec2897

And a live preview: http://duotone-filters.webflow.io/

2 Likes

Might help if I put it in the right section! Bump.

This is absolutely incredible!!! Thank you so much! :smiling_face_with_three_hearts:

1 Like

No worries Kate :slight_smile:

It needs a bit of tweaking I think to get it working just right, currently it’s only got one particular set of blend modes available. I was wanting to set it up in a way that you could have a dropdown in the CMS for “Multiply”, “Lighten”, etc, for each of the colours you pick.

1 Like

The share link is 404’d now? Sorry I’ve been pinging this a million times for reference :slight_smile:

1 Like

Hey Kate,

You can find the link to the clonable version here: https://webflow.com/website/Dynamic-Duotone-Filters?s=duotone-filters

Joe

1 Like

Thanks Joe, I’ve learned a ton just looking at this code.

1 Like

It is an absolute pleasure to hear that it has been of use to you. Thank you :slight_smile:

Just a quick message to say thank you @JoeMillion for sharing this amazing implementation! :raised_hands:

Exactly what I was trying to achieve — you saved me a good hour of tweaking, sending positive vibes your way!

1 Like