Image filter with Vue.js and CSS3
CSS3 Filter with Vue.js
Syntax -
.class-filter{ filter: <filter-function> [<filter-function>] }
fork on
Github
Learn CSS3 filter
New image
Download
img {
filter: {{filters.filter}};
}
Copied
Copy code
Adjust the filter
Reset
Grayscale ({{ filterFunctions.grayscale }})
Blur ({{ filterFunctions.blur }}px)
Sepia ({{ filterFunctions.sepia }})
Saturate ({{ filterFunctions.saturate }})
Opacity ({{ filterFunctions.opacity }})
Brightness ({{ filterFunctions.brightness }})
Contrast ({{ filterFunctions.contrast }})
Hue-rotate ({{ filterFunctions.hueRotate }}deg)
Invert ({{ filterFunctions.invert }})