[{"document_url": "https://vuejsfeed.com/blog/vue-js-css-filter-playground", "unformatted_src": "https://vuejs.org/images/tmvuejs2.png", "src": "https://vuejs.org/images/tmvuejs2.png", "formatted_filename": "tmvuejs", "alt_text": "The Majesty of Vue.js 2", "rendered_height": 67}, null, {"document_url": "https://vuejsfeed.com/blog/vue-js-css-filter-playground", "unformatted_src": "https://d2jq2hx2dbkw6t.cloudfront.net/686/car-communication-3100980_640.jpg", "src": "https://d2jq2hx2dbkw6t.cloudfront.net/686/car-communication-3100980_640.jpg", "formatted_filename": "car communication", "alt_text": "Blog image"}, null, {"document_url": "https://vuejsfeed.com/blog/vue-js-css-filter-playground", "unformatted_src": "https://i.imgur.com/HFRS46M.png", "src": "https://i.imgur.com/HFRS46M.png", "formatted_filename": "HFRS M", "alt_text": "vue.js color gradient generator"}, null, {"document_url": "https://vuejsfeed.com/blog/vue-js-css-filter-playground", "unformatted_src": "/img/majesty-vuejs-2.png", "src": "https://vuejsfeed.com/img/majesty-vuejs-2.png", "formatted_filename": "majesty vuejs", "alt_text": "The Majesty of Vue.js"}, null]
Become a sponsor kostas maniatis in Code 2 weeks ago

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:

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.


Subscribe for more Vue

More Vue Stories

Statusfy: Open Source Status Page system

CION: Design system boilerplate for Vue.js

Submit yours
