CSS Filters

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%);
}