DUOTONE FILTERING WITH CSS VARIABLES

Author:

  • Jhey
  • July 11, 2018

Made with:

  • HTML (Pug) / CSS (Stylus) / JavaScript

About the code:

Was playing with mix-blend-mode to create different duotone filters. Then I thought it might be cool to have a handy selector wheel to try out different filters. So here it is! A duotone filtering tester using CSS variables. The inner ring is the lightening color whilst the outer is the darkening color. To change the colors, adjust the colors variable in the Pug code.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: –

Download Demo and Code

Add a Comment

Your email address will not be published. Required fields are marked *