Vue.js CSS Filter Playground

vue.js playground for image filters

This codepen app was created for CSS filtering images with Vue.js. You can choose to apply many different rules such as Contrast, Saturate, Blur and more to alter the image.

Change blue, brightness, contrast, grayscale, invert, saturate, sepia, opacity and drop-shadow settings.

Other Info:

  • Use the mousehweel on image to zoom-in / zoom-out.
  • Use mousehweel on range elements to get a precise reduction / increment value.
  • Controls and CSS Style box become translucent and will show on hover.

Go ahead and play with the CSS filter properties, take a look at the code and do your own experiments.

Vue.js CSS Filter Playground

If you try to hover the bottom bar it will become less transparent to show you the applied rules. vue.js color gradient generator

Images are loaded from Unsplash.