CSS Image Filters
Consider an image. Note that I did not properly resize the image, and did not provide an alt tag.
Apply the blur filter.
CSS
.filterblur {
-webkit-filter:blur(5px);
-filter:blur(5px);
}
Apply the brightness filter.
CSS
.filterbrightness {
-webkit-filter:brightness(150%);
-filter:brightness(150%);
}
Apply the contrast filter.
CSS
.filtercontrast {
-webkit-filter:contrast(50%);
-filter:contrast(50%);
}
Apply the dropshadow filter.
CSS
.filterdropshadow {
-webkit-filter:drop-shadow(5px 5px 5px #828282);
-filter:drop-shadow(5px 5px 5px #828282);
}
Apply the grayscale filter.
CSS
.filtergrayscale {
-webkit-filter:grayscale(100%);
-filter:grayscale(100%);
}
Apply the hue filter.
CSS
.filterhuerotate {
-webkit-filter:hue-rotate(90deg);
-filter:hue-rotate(90deg);
}
Apply the invert filter.
CSS
.filterinvert {
-webkit-filter:invert(100%);
-filter:invert(100%);
}
Apply the opacity filter.
CSS
.filteropacity {
-webkit-filter:opacity(50%);
-filter:opacity(50%);
}
Apply the saturate filter.
CSS
.filtersaturate {
-webkit-filter:saturate(50%);
-filter:saturate(50%);
}
Apply the sepia filter.
CSS
.filtersepia {
-webkit-filter:sepia(100%);
-filter:sepia(100%);
}