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.
If you try to hover the bottom bar it will become less transparent to show you the applied rules.
Images are loaded from Unsplash.
